Simulates drag and drop functionality

SimulateDragDrop.js

// // Try it here: https://www.w3schools.com/HTML/html5_draganddrop.asp
// var dragElem = document.querySelector("#drag1")
// var dropElem = document.querySelector("#div2")
// simulateDragDrop(dragElem, dropElem)

function simulateDragDrop (dragElem, dropElem) {
  var event = createEvent("dragstart")
  dispatchEvent(dragElem, "dragstart", event)
  var dropEvent = createEvent("drop")
  dropEvent.dataTransfer = event.dataTransfer
  dispatchEvent(dropElem, "drop", dropEvent)
  var dragEndEvent = createEvent("dragend")
  dragEndEvent.dataTransfer = event.dataTransfer
  dispatchEvent(dragElem, "dragend", dragEndEvent)
  function createEvent (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
  }
  function dispatchEvent (dragElem, type, event) {
    if(dragElem.dispatchEvent) { dragElem.dispatchEvent(event) }
    else if( dragElem.fireEvent ) { dragElem.fireEvent("on" + type, event) }
  }
};

Sure you could do that, or create a hidden element positioned over the larger one.