Hi everybody.
I would like to implement a “Drag and Drop” feature in my webpage.
As Wix doesn’t have any built-in modules for this purpose, the only way I found out was to make a transparent HTML iframe with a higher z-index than the original picture of the Wix webpage and put a transparent picture (in the frame) above the picture on the Wix Page. And then use some JS to implement the drag & drop feature and trace back signals (“DragBegin”, “DragEnd”) and mouse X and Y coords, to finally handle the animation on the parent page.
I currently have done this in my iframe :
<!DOCTYPE HTML>
<html>
<head>
<style>
#drag {
opacity: 0%;
}
</style>
<script>
var x;
var y;
window.addEventListener("mousemove", function(e) {
x = e.x;
y = e.y;
window.parent.postMessage(`${x}, ${y}`,"*");
});
function dragEnd(ev) {
window.parent.postMessage("dragEnd", "*");
}
function dragBegin(ev) {
window.parent.postMessage("dragBegin", "*");
}
</script>
</head>
<body>
<img id="drag" src="https://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="dragBegin(event)" ondragend="dragEnd(event)" width="165" height="165">
</body>
</html>
And this in my parent page, in the “Wix page Code”:
$w.onReady(() => {
$w("#html1").onMessage( (event) => {
let receivedData = event.data;
console.log(receivedData);
});
But I have a issue. It’s like the “dragBegin” and “dragEnd” events are muting the event listener on mousemove…
I would be very grateful if anybody could help me for this. ^^’
( Maybe with coroutine, parallelization, asynchronous programming, or something like that? I have no idea. 
)
Regards!