问如何使图像在重叠时消失？
EN

Stack Overflow用户

提问于 2016-06-07 08:18:13

回答 1查看 155关注 0票数 1

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

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

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

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-07 09:46:49

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37674027

复制

相似问题

问如何使图像在重叠时消失？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使图像在重叠时消失？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使图像在重叠时消失？
EN