拖放Html5从两侧

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

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>

感谢提前:)

来源

2012-07-10 Haseeb Akhtar

JavaScript应该可以正常拖拽向前和向后。请发布您的标记以及您如何附加这些事件处理程序的详细信息。 – robertc 2012-07-10 11:43:09

@robertc，我已经从html div标记添加了我的方法调用。 – 2012-07-10 12:12:30

你试图将它拖回到元素的'allowDrop'上吗？ – robertc 2012-07-10 14:09:55

对于你能够拖动的东西“回”你需要的地方拖东西收回来，像这样：

<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中，网络连接我测试过的refox和Opera）。

来源

2012-07-11 07:52:10 robertc

拖放Html5从两侧

回答

相关问题