Drag and drop li elements using dataTransfer object in javascript

Question

I am automating one of the drag and drop features in our application. All I'm trying to drag li elements from "sourcelist" to "destlist" is through javascript using a dataTransfer object. Here is what I did and I get an error in firefox. "event.dataTransfer - undefined"

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

Do I need to initialize an event of an object? how can i create an event object programmatically for drag and drop? I am new to javascript and would appreciate it if someone could point me in the right direction.

Thanks, -Nilesh

Answer 1

DragDrop . Chrome 8, Safari 5 Firefox 3.6. , .

.

http://html5demos.com/drag

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

Answer 2

, http://jquerypp.com/, jQuery, dragNdrop challenge.

Answer 3

, , : . Chrome, , dragstart dragover, . , OP . : fooobar.com/questions/1787549/...