在 Javascript 中使用 dataTransfer 对象拖放 li 元素答案

【问题标题】：Drag and drop li elements using dataTransfer Object in Javascript在 Javascript 中使用 dataTransfer 对象拖放 li 元素
【发布时间】：2011-06-14 19:14:12
【问题描述】：

我正在自动化我们应用程序中的一项拖放功能。我正在尝试的只是使用 dataTransfer 对象通过 javascript 将 li 元素从“sourcelist”拖放到“destlist”。这是我所做的，我在 Firefox 中遇到 错误。说“event.dataTransfer 未定义”

<div id=source> 
  <ul id=sourcelist>
   <li title='foo1'>foo1</li>
   <li title='foo2'>foo2</li>
  </ul>
</div>
<div id=dest>
 <ul id=destlist> </ul> 
</div>


event.dataTransfer.setData("text/html","<li title='foo1'>foo1</li>");
var textData = event.dataTransfer.getData("text/html");
var target=document.getElementById('destlist');
target.innerHTML=textData;

我必须初始化对象事件吗？如何以编程方式为拖放创建事件对象？我对 Javascript 很陌生，如果有人能指出我正确的方向，我将不胜感激。

【问题讨论】：

您使用的是哪些框架？
我的应用程序使用 jQuery，所以我可以使用 jQuery 进行拖放。你知道如何在 jQuery 中进行拖放操作吗？
请把所有的代码贴出来好吗？我假设还有更多 - 目前没有定义“事件”。

标签： javascript drag-and-drop dom-events javascript-framework

【解决方案1】：

对于像我一样找到此线程的未来访问者：某些浏览器仅支持某些事件的数据传输。遗憾的是，Chrome 不支持 dragstart 或 dragover。这可能就是 OP 代码失败的原因。在这里找到了：https://stackoverflow.com/a/7837276/597849

【讨论】：

【解决方案2】：

也许可以看看http://jquerypp.com/，它提供了对 jQuery 的扩展，以及其他的 DragNdrop 挑战。

【讨论】：

【解决方案3】：

DragDrop 功能仅在较新版本的浏览器中受支持。你试过 Chrome 8、Safari 5 或 Firefox 3.6。它们都是新版本，应该在那里工作。

查看以下链接以获取帮助。

http://html5demos.com/drag

http://html5doctor.com/native-drag-and-drop/

enter link description here

【讨论】：