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.

"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
– 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
– Randomblue, Commented Jan 20, 2012 at 10:23

Ruan Mendes · Accepted Answer · 2012-01-20 19:58:42Z

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

answered Jan 20, 2012 at 19:58

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jacefarm · Accepted Answer · 2019-01-09 16:21:05Z

1

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.

edited Jan 9, 2019 at 16:21

jacefarm

7,7216 gold badges38 silver badges46 bronze badges

answered Jan 20, 2012 at 10:20

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

5 Comments

Randomblue Over a year ago

I'm trying to write UI tests.

prodigitalson Over a year ago

Ahhh... now it all makes sense - you should add that this is for UI tests in your question :-) What testing framework are you using?

Randomblue Over a year ago

I'm using Selenium WebDriver, but it has shortcomings for drag-and-drop.

prodigitalson Over a year ago

Well it might be good to ellaborate on what issues you are having witht he draganddrop support in Selenium.

Randomblue Over a year ago

I cannot get WebDriver drag-and-drop working on a complex bit of jQuery UI. The click_and_hold() part works fine, but not the move_to_element() bit. It's very frustrating.

Community · Accepted Answer · 2017-05-23 12:06:20Z

0

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

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jan 20, 2012 at 10:33

Damen TheSifter

9121 gold badge6 silver badges17 bronze badges

Comments

netadictos · Accepted Answer · 2012-01-20 10:15:44Z

-1

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

answered Jan 20, 2012 at 10:15

netadictos

7,7503 gold badges46 silver badges70 bronze badges

3 Comments

Randomblue Over a year ago

I don't think this answers my question. I have elements which are already draggable and droppable. I want to trigger drag and drop events without manually doing it (with the mouse).

Bojangles Over a year ago

@Randomblue Are you using jQuery UI already, or another plugin? In any case, there should be callback functions and relevant documentation. If there isn't, you could either extend/patch the plugin yourself (if it's on Github or the like), or use a different plugin.

Damen TheSifter Over a year ago

Maybe you are actually after an animation that emulates the movement of on element into another? If so what has this to do with the user interaction?

Collectives™ on Stack Overflow

Emulate drag-and-drop using JavaScript

4 Answers 4

Comments

5 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related