Skip to content

Instantly share code, notes, and snippets.

@druska
Created August 26, 2015 03:56
Show Gist options
  • Save druska/624501b7209a74040175 to your computer and use it in GitHub Desktop.
Save druska/624501b7209a74040175 to your computer and use it in GitHub Desktop.
Create the `simulateDragDrop` function which can be used to simulate clicking and dragging one DOM Node onto another
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)
}
@Tasmaniandevil1979
Copy link

DragEvent

function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    function createCustomEvent(type, dataTransfer) {
        dataTransfer.data = {};
        dataTransfer.setData = function(type,val){this.data[type] = val};
        dataTransfer.getData = function(type){return this.data[type]};
        dataTransfer.dropEffect = 'move';
        dataTransfer.effectAllowed = 'move';
        dataTransfer.types = [];
        dataTransfer.items = {};
        dataTransfer.files = {};
        var event = new DragEvent(
            type,  
            {
                bubbles: true,
                cancelable: true,
                dataTransfer: dataTransfer
            });
        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, new DataTransfer())
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP, event.dataTransfer)
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END, event.dataTransfer)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment