前言

浏览器中我们常常拖动某个图片到另一个位置，但是这个拖拽功能是怎么实现的呢？

先设置HTML

分析 为body设置弹性布局，display: flex;align-items: center;justify-content: center;能够让body内的元素水平垂直居中，cursor: pointer;改变鼠标光标在悬停于元素上时的外观，当值为pointer时，鼠标光标会变成一个手型。

绑定监听事件

首先要为图片绑定监听事件，使其可以拖动

• 通过document.querySelector('.fill')，选中第一个类名为fill的DOM节点，返回给变量fill
• 为fill绑定监听事件dragstart、dragend,当鼠标拖动该图片时，为当前元素的类列表中添加上一个新的类hold,hold会为图片加上一个边框，当放开鼠标后，会移除这个hold类。在这个例子中，this指向了触发该事件的元素fill。
• 通过const empties = document.querySelectorAll('.empty')获取所有类名为empty，以一个集合的形式返回给empties
• 再通过一个for循环为每个盒子绑定dragover(当拖拽的元素悬停在.empty元素上时触发)、dragenter(当拖拽的元素首次进入.empty元素的边界时触发)、dragleave(当拖拽的元素离开.empty元素的边界时触发)、drop(当拖拽的元素在.empty元素上释放时触发)事件。
• 调用e.preventDefault()来阻止默认行为，因为浏览器dragover和dragenter事件有默认行为，在某些情况下，浏览器会自动滚动页面或者阻止拖拽到目标区域。
• 当dragenter事件触发时，会为该元素的类列表添加一个hovered类，dragleave事件触发，移除hovered类。hovered类能更清晰的看到事件触发的过程。
• 当drop事件触发时， this.className = 'empty'; ：这行代码将当前元素的类名设置为'empty'。这通常是为了清除可能在拖放过程中添加的其他类（如 hovered 或 hold），以确保元素回到初始状态。this.append(fill);将 .fill类的元素附加到当前元素的子元素列表中。append 方法是 Element 类型的一个方法，用于将一个或多个节点添加到当前元素的子元素列表的末尾。

总结

自己动手试试吧