CODEWITHSUNDEEP
javascript
AndrB
AndrB

Reputation: 23

how to make images disappear when they overlap?

I have an html document containing 6 images. with javascript I move those img using drag and drop. Then, when 2 images overlap, they should disappear and another image should be created and should appear instead of those 2 overlapped. It ends when there is only one or no image left on the scren. How should I do that?

This is what I have until now, it only allows me to drag and drop pictures:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and drop</title>
<style type="text/css">

.dragme {
        position:relative;
        width: 270px;
        height: 203px;
        cursor: move;
    }
    #draggable {
        background-color: #ccc;
        border: 1px solid #000;
    }

</style>
<script type="text/javascript">
        function startDrag(e) {
            // determine event object
            if (!e) {
                var e = window.event;
            }

            // IE uses srcElement, others use target
            var targ = e.target ? e.target : e.srcElement;

            if (targ.className != 'dragme') {return};
            // calculate event X, Y coordinates
                offsetX = e.clientX;
                offsetY = e.clientY;

            // assign default values for top and left properties
            if(!targ.style.left) { targ.style.left='0px'};
            if (!targ.style.top) { targ.style.top='0px'};

            // calculate integer values for top and left 
            // properties
            coordX = parseInt(targ.style.left);
            coordY = parseInt(targ.style.top);
            drag = true;

            // move div element
                document.onmousemove=dragDiv;

        }
        function dragDiv(e) {
            if (!drag) {return};
            if (!e) { var e= window.event};
            var targ=e.target?e.target:e.srcElement;
            // move div element
            targ.style.left=coordX+e.clientX-offsetX+'px';
            targ.style.top=coordY+e.clientY-offsetY+'px';
            return false;
        }
        function stopDrag() {
            drag=false;
        }
        window.onload = function() {
            document.onmousedown = startDrag;
            document.onmouseup = stopDrag;
        }

</script>

<body>

<img src="pic1.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic2.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic3.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic4.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="land.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">
<img src="pic6.jpg" alt="Mountain View" style="width:304px;height:228px;" title="drag-and-drop image script" class="dragme">

</body>
</html>

Upvotes: 1

Views: 216

Answers (1)

user964769
user964769

Reputation:

I'd probably give this a go using JQuery, it does most of the hard work for you.

See: https://jqueryui.com/draggable/

and: https://jqueryui.com/droppable/

Below is a rough outline as to how I would tackle your problem... it will make an image disappear when it is dragged over another image, but it doesn't make a new one appear.

hopefully this will point you in the right direction though...

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
  .draggable { width: 150px; height: 150px; padding: 0.5em; }
  .draggableImg { width: 150px; height: 150px;}
  .hiddenImage {display:none;}
  body {font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
    font-size: 62.5%;}
  </style>
  <script>
  $(function() {
    $( ".draggable" ).draggable();

    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        $(this)
          .addClass("hiddenImage")
      }
    });

  });
  </script>
</head>
<body>

<div class="ui-widget-content draggable droppable"> 
  <img src="pic1.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>

<div class="ui-widget-content draggable droppable"> 
<img src="pic2.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>

<div class="ui-widget-content draggable droppable"> 
<img src="pic3.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>

<div class="ui-widget-content draggable droppable"> 
<img src="pic4.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>

<div class="ui-widget-content draggable droppable"> 
<img src="land.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>

<div class="ui-widget-content draggable droppable"> 
<img src="pic6.jpg" alt="Mountain View" title="drag-and-drop image script" class="draggableImg"/>
</div>

</body>
</html>

Upvotes: 2

Related Questions