ð我从未使用 drag＆drop 用香草JavaScript的功能。
在我每天从事的企业应用程序中，我通常依靠诸如 angular ， react 或 vue 等框架。处理它的方法，此外，还解决了我必须手动处理的经典问题。
ð¡这就是为什么我想尝试一下，在HTML和JS中开发一个非常基本的项目。
在这里简要说明：
- 为了激活元素上的拖放功能，必须将其设置为
draggable属性。
<div class="item" draggable="true">Drag me</div>
- 如果我们需要添加一些操作（例如，将元素的数据保存为将来的目的），一旦元素被“抓取”，则必须添加对
dragStart事件的侦听器。
<div
id="my-item"
class="item"
draggable="true"
ondragstart=handleDragStart(event)
>Drag me</div>
<script>
handleDragStart(e) {
console.log('You are dragging ', e.target.id)
}
</script>
- 如果我们想将所选元素放在某个地方，则需要在HTML中创建一个或多个下降区域。
为了创建它们，我们需要使目标元素收听
dragOver和drop事件。
<div
class="dropzone"
ondrop="handleDrop(event)"
ondragover="handleDragOver(event)"
>
Drop the dragging element here!
</p>
<script>
handleDrop(e) {
e.preventDefault(); // prevent default action (e.g. open as link for some elements)
// CODE HERE (e.g. append element to the drop zone)
}
handleDragOver(e) {
e.preventDefault(); // Required to allow Drop event
}
</script>
几乎就是这样！
演示
像往常一样，我创建了一个stackblitz project，您可以在其中使用拖放来在讲台中切换位置，然后选择哪个是Angularð¥，Vueð¥和Reactð¥的最佳ð框架/库呢（尝试猜测我的排名是什么）
，如果您只想玩它，这是demo的链接！
P.S。我没有使用dataTransfer属性，但是我将创建一个更“数据驱动”的演示来解释此功能。