HTML5 Drag and Drop - Firefox is being redirected
10,343
You need to prevent the default action:
function drop(e) {
if(e.preventDefault) { e.preventDefault(); }
if(e.stopPropagation) { e.stopPropagation(); }
window.draggedIcon.element.style.left = (event.clientX + window.draggedIcon.offset[0]) + 'px';
window.draggedIcon.element.style.top = (event.clientY + window.draggedIcon.offset[1]) + 'px';
window.draggedIcon.element.style.visibility = 'visible';
window.draggedIcon.element = null;
return false;
}
Author by
m93a
Licensing note: All original code snippets I post on StackOverflow and other Stack Exchange sites are licensed under the CC0 Public Domain Dedication – do with them as you see fit.
Updated on July 16, 2022Comments
-
m93a almost 2 years
I'm trying to implement html5's drag and drop in my app but Firefox is always redirected to dropped image's source. I'm using
e.stopPropagation()
. In Chromium everything works as expected. Strange... Here's the code:<html> <head> <meta charset="utf-8" /> <title>DuOS 0.0.0</title> <meta name="author" content="Jan Durrer, Michal Grňo" /> <link rel="stylesheet" href="./default.css" /> </head> <body> <script src="./boot.js"></script> <script src="./window.js"></script> <script src="./omnibox.js"></script> <section class="desktop"> <img class="icon" id="computer" style="left: 0px; top: 340px;" src="./image/icon/system/computer.png" /> <img class="icon" id="folder" style="left: 0px; top: 170px;" src="./image/icon/system/documents.png" /> <img class="icon" id="bin" style="left: 0px; top: 0px;" src="./image/icon/system/bin.png" /> </section> <script> window.clickedIcons = Array(); window.draggedIcon = {}; window.draggedIcon.offset = Array(); window.draggedIcon.element = null; //Pohybování function drag_start(e) { window.draggedIcon.element = e.target; event.dataTransfer.effectAllowed = 'copyMove'; event.dataTransfer.setData('text/plain', 'hola'); //hack var style = window.getComputedStyle(event.target, null); window.draggedIcon.offset[0] = parseInt(style.getPropertyValue("left"),10) - event.clientX; console.log(window.draggedIcon.offset[0]); window.draggedIcon.offset[1] = parseInt(style.getPropertyValue("top" ),10) - event.clientY; console.log(window.draggedIcon.offset[1]); window.draggedIcon.element = event.target; } function drag_over(e) { e.preventDefault(); return false; } function drop(e) { window.draggedIcon.element.style.left = (event.clientX + window.draggedIcon.offset[0]) + 'px'; window.draggedIcon.element.style.top = (event.clientY + window.draggedIcon.offset[1]) + 'px'; window.draggedIcon.element.style.visibility = 'visible'; window.draggedIcon.element = null; if(e.stopPropagation) {e.stopPropagation();} return false; } var xresult = document.evaluate('//body/*[@class="desktop"]/*[@class="icon"]', document, null, XPathResult.ANY_TYPE, null); var dm = xresult.iterateNext(); while (dm) { dm.addEventListener('dragstart',drag_start,false); dm.addEventListener('click',click,false); dm = xresult.iterateNext(); } document.body.addEventListener('dragover',drag_over,true); document.body.addEventListener('drop',drop,true); </script> </body> </html>
Thanks for your help, m93a.
-
Matthieu Riegler over 4 years
preventDefault
does the job ! But could someone explain me why a drop would trigger a redirect on Firefox ?? -
awendt about 3 years@MatthieuRiegler Wild guess: Dropping a file into Firefox navigates to the file, that's why the default is navigate to the URL being dropped. In my case,
drag
had calledevent.dataTransfer.setData('text/plain', "css")
before and FF attempted to open the URL"css"
.