Question

我正在创建一个应用程序，我正在实现Html5拖放功能，它的工作正常。现在它是一个应用程序，可能在这种情况下不需要删除项目我想再次拖动元素并放到上一个位置。我在这里看到一个例子http://ashishware.com/MochikitDnD.shtml，但它使用MochiKit.js作为他们的样本，我不想要任何外部插件/ js。请提供相同的样本或代码。我的拖放代码如下：

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

和Html看起来像

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag1" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)"></div>

提前致谢：）

Answer 1

为了能够拖回某些东西，你需要一个可以拖回东西的地方，如下所示：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2"ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>

除此之外，your code works（我测试过的Chrome，Firefox和Opera）。

从两侧拖放Html5

1 个答案: