I know that jQuery can programmatically trigger events on DOM elements that are listening to those events. For example $el.click() will trigger a click event on $el without having to physically click $el with the mouse.

Given two DOM elements dom1 and dom2, is it possible to programmatically emulate a drag-and-drop from dom1 to dom2 using jQuery (or vanilla JavaScript), where dom1 is draggable and dom2 is droppable using jQuery UI.

Note: The reason I want to do this is to build automated UI tests.

I know that jQuery can programmatically trigger events on DOM elements that are listening to those events. For example $el.click() will trigger a click event on $el without having to physically click $el with the mouse.

Given two DOM elements dom1 and dom2, is it possible to programmatically emulate a drag-and-drop from dom1 to dom2 using jQuery (or vanilla JavaScript), where dom1 is draggable and dom2 is droppable using jQuery UI.

Note: The reason I want to do this is to build automated UI tests.

• javascript
• jquery

Share Improve this question Follow edited Jan 20, 2012 at 19:51 Randomblue asked Jan 20, 2012 at 10:13 RandomblueRandomblue 116k150150 gold badges363363 silver badges558558 bronze badges 2

• "trigger drag-and-drop" is a little vague. I take it you want to create a drag and drop style interface, but do you mean "I want to use the [non existent] builtin drag and drop events"? – Bojangles Commented Jan 20, 2012 at 10:15
• @JamWaffles: I have edited the question. I have elements which are draggable and droppable. I want to trigger dragging and dropping on those element without using the mouse, just by writing JavaScript code. – Randomblue Commented Jan 20, 2012 at 10:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You have to remember that jQuery.trigger does not fire the HTML event, that is, calling .click will not cause a link to be followed. It only triggers events set with jQuery.

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

The following asserts 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" )
 }); 

If you're using UI then there are events dragstart, drag, and dragstop on the draggable behavior. You should be able to invoke these programmatically by using jQuery.trigger() just like any other event. But, you'd need to manually manipulate the event instance somehow, to input the coordinates for the item to be dropped at. I'm not sure how well that would work, or why you would want to do it.

You want , with animation move to a new parent. Check the function in JQuery - animate moving DOM element to new parent?

I normally use jquery.ui for plex things with dragging-dropping: http://jqueryui./demos/draggable/