jQuery: How Do I simulate Drag and Drop in Code?

Question

EDIT: Here's a link to show you my sample code: http://www.singingeels.com/jqtest/

I have a very simple page that references jquery-1.3.2.js, ui.core.js (latest version) and ui.draggable.js (also latest version).

I have a div that I can drag around very easily (using the mouse of course):

<div id="myDiv">hello</div> 

and then in JavaScript:

$("#myDiv").draggable(); 

This is works perfectly. But, I need to be able to simulate a 'drag and drop' using code alone. I have it mostly working, but the problem is that the events that are firing are the placeholder events.

If you open "ui.core.js" and scroll to the bottom... you'll see this:

// These are placeholder methods, to be overriden by extending plugin _mouseStart: function(event) { }, _mouseDrag: function(event) { }, _mouseStop: function(event) { }, _mouseCapture: function(event) { return true; } 

Why aren't the events being extended properly in my simulation, but when you click down with the mouse, they are? - Any ideas on how to force the _mouseDrag: property to obey the overriding extension in "ui.draggable.js"?

Solving this would be huge - and I plan to show the major benefits later.

Thanks, -Timothy

EDIT: Here's a link to show you my sample code: http://www.singingeels.com/jqtest/

EDIT 2: Click that link above and view-source... you'll see what I'm trying to do. Here's a snippet:

$(document).ready(function() {     var myDiv = $("#myDiv");      myDiv.draggable();      // This will set enough properties to simulate valid mouse options.     $.ui.mouse.options = $.ui.mouse.defaults;      var divOffset = myDiv.offset();      // This will simulate clicking down on the div - works mostly.     $.ui.mouse._mouseDown({         target: myDiv,         pageX: divOffset.left,         pageY: divOffset.top,         which: 1,          preventDefault: function() { }     }); }); 

Answer 1

There's a question in the JQuery forum about it. It's not resolved at the time of writing, but may have more information in the future.

---

EDIT: It was answered on the forum:

I recommend you use the simulate plugin which is what jQuery UI uses for unit testing drag and drop:

https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

You can see examples of use by looking at the unit tests

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js

Thanks to rdworth for that.

Answer 2

I found a solution that works pretty well. I have the drop event call a function called onDragAndDrop(). That function takes two arguments, the draggable jQuery object and the droppable jQuery object.

$('.my-drop-target').droppable({     drop: function(event, ui) {         onDragAndDrop(ui.draggable, $(event.target));     } }); 

In my tests, I have a function that calls onDragAndDrop directly, but makes sure that a user with a mouse could have performed that action.

    var simulateDragAndDrop = function(draggable, droppable) {         if (!draggable.data('uiDraggable')) {             throw new Error('Tried to drag and drop but the source element is not draggable!');         }         if (!droppable.data('uiDroppable')) {             throw new Error('Tried to drag and drop but the target element is not droppable!');         }         onDragAndDrop(draggable, droppable);     } 

I've found it to be a nice, easy-to-use solution for unit tests. I'll probably end up using it for a keyboard-accessible fallback as well.