使用 Javascript 和 html 拖放答案

【问题标题】：Drag and Drop using Javascript and html使用 Javascript 和 html 拖放
【发布时间】：2020-07-08 07:35:11
【问题描述】：

我想要一个 if 条件。如果条件不满足，则在执行放置后，放置的项目应恢复到其原始位置。我想用javascript来做

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  if(ev.target.id=="div2"){
  alert(data+" "+ev.target.id);
  }
  else{

  I want the revert to happen here
  }
}

<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

</body>

有人可以帮助我吗？在此先感谢。

【问题讨论】：

标签： javascript html jquery events drag-and-drop

【解决方案1】：

您必须在 if 条件中编写放置代码，因此如果条件不满足，则该项目不会在下面的 div 检查中被删除，我已经编辑了您的代码

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" style="width:200px;height:200px;background:red;" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" style="width:200px;height:200px;background:blue;" ondragover="allowDrop(event)">
</div>
<div id="div3" ondrop="drop(event)" style="width:200px;height:200px;background:orange;" ondragover="allowDrop(event)">
</div>
<div id="div4" ondrop="drop(event)" style="width:200px;height:200px;background:wheat;" ondragover="allowDrop(event)">
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();

if(ev.target.id=="div2"){
alert(data+" "+ev.target.id);
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

}
</script>
</body>
</html>

【讨论】：

【解决方案2】：

在这里，您可以将图像放入 div2。之后，如果您尝试将图像从 div2 拖放到另一个 div(here div3 and div4)，它将被放置到其原始 div 即 @ 987654324@。我想这就是你想要的。

<!DOCTYPE HTML>
<html>

<head>
    <style>
        #div1,
        #div2,
        #div3,
        #div4 {
            float: left;
            width: 100px;
            height: 35px;
            margin: 10px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");

            if (ev.target.id === "div2") {
                ev.target.appendChild(document.getElementById(data));
            }
            else {

                // I want the revert to happen here
                document.getElementById("div1").appendChild(document.getElementById(data));
            }

        }
    </script>
</head>

<body>

    <h2>Drag and Drop</h2>
    <p>Drag the image back and forth between the two div elements.</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
    </div>

    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

【讨论】：