Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
(function( $ ) {
$.fn.simulateDragDrop = function(options) {
return this.each(function() {
new $.simulateDragDrop(this, options);
$.simulateDragDrop = function(elem, options) {
this.options = options;
this.simulateEvent(elem, options);
$.extend($.simulateDragDrop.prototype, {
simulateEvent: function(elem, options) {
/*Simulating drag start*/
var type = "dragstart";
var event = this.createEvent(type);
this.dispatchEvent(elem, type, event);
/*Simulating drop*/
type = "drop";
var dropEvent = this.createEvent(type, {});
dropEvent.dataTransfer = event.dataTransfer;
var target;
if (options.dropTargetFrame) {
target = $(document.querySelector(options.dropTargetFrame).contentDocument.querySelector(options.dropTarget))[0];
else {
target = $(options.dropTarget)[0];
this.dispatchEvent(target, type, dropEvent);
/*Simulating drag end*/
type = "dragend";
var dragEndEvent = this.createEvent(type, {});
dragEndEvent.dataTransfer = event.dataTransfer;
this.dispatchEvent(elem, type, dragEndEvent);
createEvent: function(type) {
var event = document.createEvent("CustomEvent");
event.initCustomEvent(type, true, true, null);
event.dataTransfer = {
data: {
types: [],
setData: function(type, val){
this.types.push(type)[type] = val;
getData: function(type){
return event;
dispatchEvent: function(elem, type, event) {
if(elem.dispatchEvent) {
}else if( elem.fireEvent ) {
elem.fireEvent("on"+type, event);

This comment has been minimized.

Copy link

abobwhite commented Feb 19, 2016

Thanks! This worked perfectly for me with the types!


This comment has been minimized.

Copy link

immo-huneke-zuhlke commented Mar 15, 2016

Sorry to appear rather dense. How do I make sure that the symbol "jQuery" being passed to the self-compiling function is resolved correctly when I pass the contents of the above file to client.execute()? I tried this in my mocha test script:

var fs = require('fs');
var dragAndDrop = fs.readFileSync('test/e2e/helpers/drag_and_drop_helper.jslib'); // can't give it a .js extension or the test framework will try to execute it
    it('should drag and drop in browser', function() {
      return client
        .execute(dragAndDrop + '$("li.draggable-item:first-of-type").simulate("#drop-zone");');

Mocha reports:
Error: unknown error: jQuery is not defined

I tried adding jQuery to the dependencies in package.json using npm install --save jquery, but it seems to have made no difference.


This comment has been minimized.

Copy link

abhirep commented Jan 4, 2017

Can anyone tell me how to get this working in protractor?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.