4

我正在创建一个应用程序，我在其中实现 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>

提前致谢 ：）

4

1 回答 1

3

为了能够将某些东西“拖回”，您需要一个将东西拖回的地方，如下所示：

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

除此之外，您的代码可以工作（在我测试过的 Chrome、Firefox 和 Opera 中）。

于 2012-07-11T07:52:10.473 回答