I'm french so I'm sorry for my english.
I try to do a simple drag and drop like in : https://web.dev/drag-and-drop/ but if we replace 1, 2 and 3 by a <img>, the drag and drop doesn't work because of the default dragndrop of the <img> open the file in firefox and in edge that let the image with 0.4 opacity
I try to disable this behaviour with getElementsByTagName('img').ondragstart = function(){return false;};
but that doesn't change anything
I try also to put onmousedown='return false' in my img but It block the real drag and drop too
Edit: I found on the web I put in my Css :
img{
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}And all work in Edge not in firefox
For this the answers are in the document you're referring to already. You need to prevent the default browser behavior using event.preventDefault(). You can put this inside a handler function e.g. function handleDrop(e) {e.preventDefault()} and then call it on drop event like - myimage.addEventListener('drop', handleDrop);