个人中心
gpt4 book ai didi

javascript - 如何使图像重叠时消失？

转载 作者：行者123 更新时间：2023-11-30 16:01:27 24 4
gpt4 key购买 nike

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

这是我到目前为止所拥有的，它只允许我拖放图片:

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

最佳答案

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

关于javascript - 如何使图像重叠时消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37674027/

24 4 0
文章推荐： javascript - 树状网格 Bootstrap 在动态创建时不起作用，它正在静态工作
文章推荐： javascript - 谷歌可视化 API : how to apply a pattern on addColumn
文章推荐： 在 C 中裁剪 PGM
文章推荐： c# - 找到最具体的匹配项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com