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