I'm actually working on a WordPress website :

I need to find a way to drag an image (img) to another block (div) without user interaction in pure JS.

The HTML :

<img class="stories-img-to-validate" draggable="true" src="blob:https://xxxxxxxx.xx/bc36413e-7e13-4247-a895-5b97c40b38d9">

<div class="filepond--root wpstory-story-media filepond--hopper">

This div has the purpose to process the image and dispatch her infos to its childs via this drop event :

function(e) {
  e.preventDefault();
  var n = e.dataTransfer;
  Qi(n).then((function(n) {
    t.forEach((function(t) {
      var i = t.filterElement,
          r = t.element,
          o = t.ondrop,
          s = t.onexit,
          a = t.allowdrop;
      if (t.state = null, !i || yr(e, r)) return a(n) ? void o(fr(e), n) : s(fr(e))
    }))
  }))
}

The fact is : the user experience is really... annoying. Users are obligate to drag and drop the image and, on mobile device, it could be a real adventure !

This div is created by a plugin that uses filepond so I don't really have a lot of power on it... the best thing that I can do for now is to create a JS drop event :

function triggerDropEvent (node, eventType) {
    var dropEvent = document.createEvent ('MouseEvents');

    dropEvent.initEvent (eventType, true, true);

    node.dispatchEvent (dropEvent);
}

var targetNode = document.querySelector( ".wpstory-story-media" );
if (targetNode) {
    triggerDropEvent (targetNode, "drop");
}

When this code run, I have this error message :

Uncaught (in promise) TypeError: can't access property "items", e is undefined

But it's ok, because I just "activate" the drop event on the div so... there is no data yet !

(I know that initEvent is deprecated.)

So

1. Is it possible to perform a real fake drag and drop via pure JS to run the drop event ?
2. Can i attach to the last code the image to drop it directly onto the div ?

Thanks for all your answers !