[英]HTML5 Drag and Drop - Firefox is being redirected
我正在嘗試在我的應用程序中實現 HTML5 的拖放,但 Firefox 總是被重定向到拖放圖像的源。 我正在使用e.stopPropagation()
。 在 Chromium 中,一切都按預期工作。 這是代碼:
<section class="desktop">
<img class="icon" style="left: 0px; top: 340px;" src="./computer.png" />
<img class="icon" style="left: 0px; top: 170px;" src="./documents.png" />
<img class="icon" style="left: 0px; top: 0px;" src="./bin.png" />
</section>
<script>
window.clickedIcons = [];
window.draggedIcon = {
offset: [0, 0],
element: null
};
//Drag & drop
function dragStart(e) {
window.draggedIcon.element = e.target;
event.dataTransfer.effectAllowed = 'copyMove';
event.dataTransfer.setData('text/plain', 'hey'); //hack
const style = getComputedStyle(event.target);
draggedIcon.element = event.target;
draggedIcon.offset[0] =
parseInt(style.getPropertyValue("left")) - event.clientX;
draggedIcon.offset[1] =
parseInt(style.getPropertyValue("top" )) - event.clientY;
}
function dragOver(e) {
e.preventDefault();
return false;
}
function drop(e) {
draggedIcon.element.style.left =
(event.clientX + window.draggedIcon.offset[0]) + 'px';
draggedIcon.element.style.top =
(event.clientY + window.draggedIcon.offset[1]) + 'px';
draggedIcon.element.style.visibility = 'visible';
draggedIcon.element = null;
if (e.stopPropagation) { e.stopPropagation(); }
return false;
}
const icons = document.querySelectorAll('.desktop .icon');
for (const i of icons) {
i.addEventListener('dragstart', dragStart, false);
i.addEventListener('click', click, false);
}
document.body.addEventListener('dragover', dragOver, true);
document.body.addEventListener('drop', drop, true);
</script>
謝謝!
您需要阻止默認操作:
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.