이미지가 겹칠 때 이미지가 사라지게하려면 어떻게해야합니까?

6 개의 이미지가 포함 된 html 문서가 있습니다. javascript를 사용하여 드래그 앤 드롭을 사용하여 해당 img를 이동합니다. 그런 다음 2 개의 이미지가 겹쳐지면 이미지가 사라지고 다른 이미지가 만들어 져야하며 2 개의 이미지가 겹쳐서 표시되지 않아야합니다. scren에 이미지가 하나 또는 전혀 남아 있지 않을 때 종료됩니다. 어떻게해야합니까?이미지가 겹칠 때 이미지가 사라지게하려면 어떻게해야합니까?

이것은 내가 지금까지 무엇을 가지고, 그것은 단지 내가 사진을 드래그 앤 드롭 할 수 있습니다 : 아마 이것은 jQuery를 사용하여 이동 줄 것

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

, 그것은 당신을위한 노력의 대부분을 수행합니다.

참조 : 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

이미지가 겹칠 때 이미지가 사라지게하려면 어떻게해야합니까?

답변

관련 문제