Question

我有一个包含6张图片的html文档。使用javascript我使用拖放移动那些img。然后，当2个图像重叠时，它们应该消失，并且应该创建另一个图像，而不是那些重叠的图像。当scren上只剩下一张图像或没有图像时，它结束。我该怎么做？

这是我现在所拥有的，它只允许我拖放图片：

$.each(arrIdReg, function (id, IdRegx) {
    if (IdRegx[0] == IdRegy[0]) {                 
        Nom = Nom + IdRegx[1] + ", ";
        // strChecked = "checked='checked'";
        strChecked = true;
    }
});
$('#Elen').append("<li><input type='checkbox' value='" + IdRegx[0] + " name='IdReg' class='checkbox'>" + IdRegx[1] + "</li>").prop('checked', strChecked);

Answer 1

我可能会尝试使用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>

如何使图像重叠时消失？

1 个答案: