Emulate drag and drop using javascript

Question

I know that jQuery can programmatically fire events on DOM elements that listen for these events. For example, $el.click() click event on $el without physically clicking $el with the mouse.

Given the two DOM elements dom1 and dom2 , you can programmatically emulate drag-and-drop from dom1 to dom2 using jQuery (or vanilla JavaScript), where dom1 dragged and dom2 not available using jQuery UI.

Note. The reason I want to do this is to create automated user interface tests.

Answer 1

You must remember that jQuery.trigger does not fire an HTML event, i.e. a .click call will not result in a link. It fires only events set using jQuery.

http://jupiterjs.com/news/syn-a-standalone-synthetic-event-library is a library that really mimics HTML events. It is very easy to use.

It is further stated that "hello" has been removed from the page:

 Syn.click( {},'hello' ) .type( 'Hello World' ) .delay() //waits 600ms seconds by default .drag( $('#trash') , function() { ok( $('#hello').length == 0, "removed hello" ) }); 

Answer 2

If you use the user interface, there are dragstart , drag and dragstop events dragstart drag and-drop behavior. You should be able to call them programmatically using jQuery.trigger() like any other event. But you need to somehow manually manipulate the event instance to enter the coordinates for the element from which you want to drop the object. I'm not sure how well this will work or why you want to do it.

Answer 3

You want the animation to move to a new parent. Test a function in jQuery - update a moving DOM element for a new parent?

Answer 4

I usually use jquery.ui for complex things with drag and drop: http://jqueryui.com/demos/draggable/

Answer 5

You can always use the Drag-Sort plugin.

Usage example