Emulate drag-and-drop using JavaScript

Question

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.

Answer 1

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.com/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" )
 }); 

Answer 2

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.