拖放问题答案

【问题标题】：Drag and drop issues拖放问题
【发布时间】：2018-03-09 05:12:01
【问题描述】：

我需要在我的网站中进行拖放操作。我有两个选项，我必须选择一个来拖放到正方形中。我的第一个问题是，当我拖动一个项目时，我无法将其重新拖回，我的第二个问题是，当我移动方块和项目的位置时，拖放不起作用。有人可以帮我吗？或者有没有适合我概念的 jQuery 插件？

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));
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="images/cone.png" draggable="true" ondragstart="drag(event)">
<img id="drag2" src="images/cup.png" draggable="true" ondragstart="drag(event)">

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

您必须将图像包装在与要删除图像的 div 完全相同的 div 中。

您提到的 JavaScript 部分似乎没问题。只需将图像包装在 div 中

请提供有关第二个问题的更多详细信息。改变方块和物品的位置是什么意思

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));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; float:left; border: 1px solid; margin: 2px;"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" style="width: 200px; height: 200px; float:left; border: 1px solid; margin: 2px;">
        <img id="drag1" src="images/cone.png" draggable="true" ondragstart="drag(event)" width="100" height="100" />
        <img id="drag2" src="images/cup.png" draggable="true" ondragstart="drag(event)" width="100" height="100" />
    </div>

【讨论】：

感谢您的评论。我很高兴地说我解决了第二个问题。