Question

我正在自动化我们的应用程序中的一个拖放功能。我所要做的就是使用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很新，如果有人能指出我正确的方向，我会很感激。

谢谢， -Nilesh

Answer 1

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

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

http://html5demos.com/drag

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

enter link description here

Answer 2

或许看一下http://jquerypp.com/提供jQuery的扩展，以及拖拽挑战。

Answer 3

对于找到此主题的未来访问者，就像我一样：某些浏览器仅支持某些事件的dataTransfer。举例来说，Chrome可能不支持dragstart或dragover。这可能就是OP的代码失败的原因。在这里找到：https://stackoverflow.com/a/7837276/597849

在javascript中使用dataTransfer对象拖放li元素

3 个答案: