De hecho, estoy trabajando en un sitio web de WordPress:

Necesito encontrar una manera de arrastrar una imagen (img) a otro bloque (div) sin interacción del usuario en JS puro.

El 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">

Este div tiene el propósito de procesar la imagen y enviar su información a sus hijos a través de este evento drop:

 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)) })) })) }

El hecho es que la experiencia del usuario es realmente... molesta. Los usuarios están obligados a arrastrar y soltar la imagen y, en el dispositivo móvil, ¡podría ser una verdadera aventura!

Este div es creado por un complemento que usa filepond, por lo que realmente no tengo mucho poder en él ... lo mejor que puedo hacer por ahora es crear un evento JS drop:

 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"); }

Cuando se ejecuta este código, tengo este mensaje de error:

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

Pero está bien, porque acabo de "activar" el evento de soltar en el div, así que... ¡todavía no hay datos!

(Sé que initEvent está en desuso).

Asi que

1. ¿Es posible realizar un arrastrar y soltar falso real a través de JS puro para ejecutar el evento de soltar?
2. ¿Puedo adjuntar al último código la imagen para soltarla directamente en el div?

Gracias por todas sus respuestas !