Как сделать изображения исчезают, когда они перекрываются?

У меня есть html-документ, содержащий 6 изображений. с javascript я перемещаю эти img, используя перетаскивание. Затем, когда 2 изображения перекрываются, они должны исчезнуть, а другое изображение должно быть создано и должно появиться вместо двух перекрывающихся. Он заканчивается, когда на scren остается только одно изображение или нет. Как мне это сделать?Как сделать изображения исчезают, когда они перекрываются?

Это то, что у меня до сих пор, это только позволяет мне перетаскивать картинки:

<!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>

источник

2016-06-07 AndrB

я бы, вероятно, дать этому идти, используя JQuery, он делает большую часть тяжелой работы для вас.

См: https://jqueryui.com/draggable/

и: https://jqueryui.com/droppable/

Ниже примерный план того, как я бы решить вашу проблему ... это сделает изображение исчезает, когда он потащил над другим изображением, но не создает новый.

надеюсь, это будет указывать вам в правильном направлении, хотя ...

<!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>

источник

2016-06-07 09:46:49

Это очень помогает. Огромное спасибо. – AndrB

Как сделать изображения исчезают, когда они перекрываются?

ответ

Смежные вопросы