javascript - 如何实现简单的原生拖放？

Question

我正在尝试在 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);

Answer 1

以下 4 件事应该可以解决您的浏览器/事件相关问题并为您处理丢弃问题:

1. drop 事件必须附加到 dropZone div。
2. 取消 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:捕获的位置。