Tuesday 15 June 2010

unit testing - How to simulate HTML5 Drag and Drop events in javascript? -


As the title, I am trying to simulate an HTML5 drag and drop event in JavaScript.

I 'Jquery.ui.simulate and also seen in simulation function. Simulating both mousedown, MouseMove, by drag and drop simluate, and mouseup which works with jQuery UI objects, seem to be able to be able to.

But the drag / drop events in the pages do not seem to be simulatable using the same method. A mousedown trigger dragstart HTML5 event does not appear to be active.

Is there a way to get either dragent events to execute based on a simulation mousedown / MouseMove / etc, or is there a way to emulate the draggart (and then drop) events directly?

I have tried to modify the HTML 5 Drainet event to add, so I can try something like the following on the demo page

  simulation (document.query) selector (# 'three'), 'Dragrt')   

but I get an error because I did not know how Detatronsfr object simulated Dragrt events correctly.

Actually, I will accept any answer that will pull me three into the 'bin' element or use jquery.ui.simluate (or any other library) or modified version By i found on SO

Your best bet is to rebuild a fake event object.

In my unit test for the drag-and-drop file upload library (, shameless plug), I am doing this with jQuery method. In my source code, I set my drop event listener like element.ondrop () :

  element.ondrop = function (e) {e.preventDefault (); ReadFiles (e.dataTransfer.files); };   

And then I can test by making a fake event object and passing it in the ondrop method.

  element .Ondrop ($. Event ('drop', {data transfer: {files: []}}));    

No comments:

Post a Comment