Skip to content

Instantly share code, notes, and snippets.

Embed
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)
this.data[type] = val;
},
getData: function(type){
return this.data[type];
}
};
return event;
},
dispatchEvent: function(elem, type, event) {
if(elem.dispatchEvent) {
elem.dispatchEvent(event);
}else if( elem.fireEvent ) {
elem.fireEvent("on"+type, event);
}
}
});
})(jQuery);
@abobwhite

This comment has been minimized.

Copy link

commented Feb 19, 2016

Thanks! This worked perfectly for me with the types!

@immo-huneke-zuhlke

This comment has been minimized.

Copy link

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.

@abhirep

This comment has been minimized.

Copy link

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.