我正在尝试在 div 上实现简单的拖放效果。我正在使用 native HTML5 API。基本上,我试图将左侧的粉色框拖到深灰色区域。查看 fiddle :一切似乎都很好,但是,我无法将盒子放在深灰色区域。
https://jsfiddle.net/pablodarde/2wy1s2vn/
我正在使用这个documentation作为支持。
这是我的代码:
HTML
<div class="container">
<div class="side-bar">
<div class="box" draggable='true'></div>
</div>
<div class="drop-zone"></div>
</div>
JavaScript
const box = document.querySelector('.box');
const dropZone = document.querySelector('.drop-zone');
const handleDragStart = (e) => {
console.log(e.dataTransfer);
e.dataTransfer.effectAllowed = 'move';
};
const handleDragEnter = (e) => {
e.target.className += ' active-drop';
e.dataTransfer.dropEffect = 'move';
console.log(e.dataTransfer);
e.preventDefault();
e.stopPropagation();
}
const handleDragLeave = (e) => {
e.target.className = 'drop-zone';
}
const handleDrop = (e) => {
console.log('Drop!!');
e.preventDefault();
e.stopPropagation();
}
box.addEventListener('dragstart', handleDragStart);
box.addEventListener('drop', handleDrop);
dropZone.addEventListener('dragenter', handleDragEnter);
dropZone.addEventListener('dragleave', handleDragLeave);
最佳答案
以下 4 件事应该可以解决您的浏览器/事件相关问题并为您处理丢弃问题:
drop
事件必须附加到dropZone
div。- 取消
dragover
事件处理程序中的事件。您还没有,请添加。
对于火狐浏览器:
将以下行添加到您的
dragstart
处理程序中:e.dataTransfer.setData('sourceId', '<id of the source>');
这可以是任何键值,但必须设置它才能在 Firefox 中进行拖放操作。我已经设置了盒子的 ID,因为我想在放置处理程序中使用它。
- 拖放处理以将框附加到拖放区:https://jsfiddle.net/kyqr1o6b/3/
处理 drop 的最终工作代码:https://jsfiddle.net/kyqr1o6b/6/
更新:添加了对 Firefox 的支持。
更新 2:丢弃已处理。
更新 3:捕获的位置。
关于javascript - 如何实现简单的原生拖放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46282625/