Skip to content

Instantly share code, notes, and snippets.

@deanveloper
Created April 13, 2023 00:02
Show Gist options
  • Save deanveloper/e752d66035eb709cb00aebcc225cb03e to your computer and use it in GitHub Desktop.
Save deanveloper/e752d66035eb709cb00aebcc225cb03e to your computer and use it in GitHub Desktop.
a version of https://gist.github.com/rcorreia/2362544 which works with react-dnd library
(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 dragenter*/
type = 'dragenter';
var dragEnterEvent = this.createEvent(type, {});
dragEnterEvent.dataTransfer = event.dataTransfer;
this.dispatchEvent($(options.dropTarget)[0], type, dragEnterEvent);
/*Simulating dragover*/
type = 'dragover';
var dragOverEvent = this.createEvent(type, {});
dragOverEvent.dataTransfer = event.dataTransfer;
this.dispatchEvent($(options.dropTarget)[0], type, dragOverEvent);
/*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: {
},
setData: function(type, val){
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment