function simulateDragDrop(sourceNode, destinationNode) { | |
var EVENT_TYPES = { | |
DRAG_END: 'dragend', | |
DRAG_START: 'dragstart', | |
DROP: 'drop' | |
} | |
function createCustomEvent(type) { | |
var event = new CustomEvent("CustomEvent") | |
event.initCustomEvent(type, true, true, null) | |
event.dataTransfer = { | |
data: { | |
}, | |
setData: function(type, val) { | |
this.data[type] = val | |
}, | |
getData: function(type) { | |
return this.data[type] | |
} | |
} | |
return event | |
} | |
function dispatchEvent(node, type, event) { | |
if (node.dispatchEvent) { | |
return node.dispatchEvent(event) | |
} | |
if (node.fireEvent) { | |
return node.fireEvent("on" + type, event) | |
} | |
} | |
var event = createCustomEvent(EVENT_TYPES.DRAG_START) | |
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event) | |
var dropEvent = createCustomEvent(EVENT_TYPES.DROP) | |
dropEvent.dataTransfer = event.dataTransfer | |
dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent) | |
var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END) | |
dragEndEvent.dataTransfer = event.dataTransfer | |
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent) | |
} |
This comment has been minimized.
This comment has been minimized.
Can you explain how to use this script in a Protractor test please ? |
This comment has been minimized.
This comment has been minimized.
Hi, could you please explain how to use this script in java script (code snippet). |
This comment has been minimized.
This comment has been minimized.
I am getting ReferenceError: CustomEvent is not defined - error line var event = new CustomEvent("CustomEvent") |
This comment has been minimized.
This comment has been minimized.
Is the simulation supposed to work with all drag&drop libs? http://jsbin.com/bupeqavaca/1/edit?html,js,output No drag and drop is taking place, no error messages in the console either. any ideas? |
This comment has been minimized.
This comment has been minimized.
Has anyone figured out how to use this script in Protractor? |
This comment has been minimized.
This comment has been minimized.
I did such things to make it work in Protractor:
var dragAndDropFn = require(path + '/native_js_drag_and_drop_helper.js');
/* ... */
it('should drag', function () {
var field = element.all(by.className('drag-handle')).get(0);
var src = element.all(by.className('box-list-compact-hover')).get(0);
browser.executeScript(dragAndDropFn, field.getWebElement(), src.getWebElement());
}); |
This comment has been minimized.
This comment has been minimized.
Hi @minmur, Could you please tell me the selenium version that you are using? Thanks |
This comment has been minimized.
This comment has been minimized.
Hi, Its working on chrome and firefox, but failing on IE11. Should I need to change anything for this to work on IE11? Please help |
This comment has been minimized.
This comment has been minimized.
For the script to work in IE11, Please commit the same in the original too |
This comment has been minimized.
This comment has been minimized.
Hey @minmur did you include the script as a separate file or was it in your test file? Also could you tell me where the path variable is defined? Or is this a build in function in protractor? |
This comment has been minimized.
This comment has been minimized.
Hello, @minmur. Thank you for your converting. But, still I don't know how to use it with protractor. var dragAndDropFn = require('./native_js_drag_and_drop_helper.js'); describe('Drag and Drop Test', function() {
}); Thanks in advance. |
This comment has been minimized.
This comment has been minimized.
I try to move an element by dragging and droping it through a list of draggable elements. |
This comment has been minimized.
This comment has been minimized.
Hi there, Trying to get this working in a Java project. I've loaded this JS and am trying to execute it with In the code above, html5Helper is a string representation of the source above, and dragTarget/dropTarget are selenium WebElements. The JS is executing, and events are dispatching, but drag-and-drop isn't working. Any thoughts? |
This comment has been minimized.
This comment has been minimized.
I was able to make it work in Java:
|
This comment has been minimized.
This comment has been minimized.
Forked in https://gist.github.com/douglaslise/884692bb54cdf8e76702c01bc18defbd with a fix, making it running in IE11 and also in automated tests using PhantomJS on CircleCI |
This comment has been minimized.
This comment has been minimized.
I tried the file but got the error: java.util.HashMap cannot be cast to java.lang.String. Any idea? |
This comment has been minimized.
This comment has been minimized.
I don't a element where i need to drop, it is a canvas and i need to drop at particular location, how can i achieve this? Help would be greatly appreciated. |
This comment has been minimized.
This comment has been minimized.
Amazing! Thank you for this script, I finally have a test passing. I adapted it slightly to reflect the exact events I was using in my drag/drop component (I also needed 'dragover'). |
This comment has been minimized.
This comment has been minimized.
Hi Marina, |
This comment has been minimized.
This comment has been minimized.
cool beans |
This comment has been minimized.
This comment has been minimized.
@pidupuis - did you resolve the duplication of elements? |
This comment has been minimized.
This comment has been minimized.
@elenatosheva - Not sure what your exact setup is but i was getting the same duplication issue when using https://github.com/marceljuenemann/angular-drag-and-drop-lists.
|
This comment has been minimized.
This comment has been minimized.
@leesaxby - Thank very much for the reply. I'm using protractor on windows/chrome to test an angular application, which Regards, |
This comment has been minimized.
This comment has been minimized.
Many thanks, @leesaxby , your solution appears to work in my case too. Now I can continue writing drag&drop tests. Regards, |
This comment has been minimized.
This comment has been minimized.
@leesaxby @elenatosheva Issue dataTransfer.types is not set or probably not allowed to read in dragstart and drop event Observation : during manual drag drop dragstart event
**Observation : when using above script - custom event **
I am using
|
This comment has been minimized.
This comment has been minimized.
Solved above issue by changing . Now working fine in chrome for ruby for angular drag drop lists
|
This comment has been minimized.
This comment has been minimized.
it does not work with dragular:
|
This comment has been minimized.
This comment has been minimized.
As of angular-drag-and-drop-lists version >= 2.0.0 the above work around no longer seems to work as is, due to the directive using a custom MIME type. Iv'e forked the gist and updated it, allowing drag and drop of html elements in protractor tests. Basic app to test the fix. |
This comment has been minimized.
This comment has been minimized.
@druska What is the licensing on this code? |
This comment has been minimized.
This comment has been minimized.
Can someone give me an example how to use it in Python script please |
This comment has been minimized.
This comment has been minimized.
Thank you, the solution above works fine in Protractor |
This comment has been minimized.
This comment has been minimized.
Can you share the dragover event changes done in javascript? |
This comment has been minimized.
This comment has been minimized.
Brilliant solution. Thanks a lot. |
This comment has been minimized.
This comment has been minimized.
Hi! I am trying to use this with Sortable.js but nothing happens. No errors and the drag and drop doesn't happen. Is this supposed to work with current browsers? |
This comment has been minimized.
This comment has been minimized.
Same here. Doesn't seem to work with Sortable.js. |
This comment has been minimized.
This comment has been minimized.
Great. Works fine with selenium + java |
This comment has been minimized.
This comment has been minimized.
This is amazing! Works perfectly with Selenium JavascriptExecutor =) |
This comment has been minimized.
This comment has been minimized.
Can anybody please help me to know how can we drag and drop by offset using Javascript executor in Python? |
This comment has been minimized.
Arguably clearer than the original (https://gist.github.com/rcorreia/2362544). Thanks for providing a native version :)