一文搞懂drag&drop浏览器拖放功能的实现
拖放功能，即将一个元素从一个区域，通过拖拽，放置到另一个区域。常见的应用是将文件或图片从一个区域，拖放到另一个区域。中文常常把这表述成拖拽，实际上拖拽的描述并不准确，应该叫拖放，因为drag事件和drop事件是成对使用的，即拖拽和放置。drag在拖拽动作发生时触发，携带被拖拽元素的信息，drop在放置元素时触发，接收传递的拖拽元素的信息。
由于常常表述成拖拽，所以有些人在实现拖动功能时以为会触发drag事件，比如侧边栏拖拽。实际上drag是为拖放功能设计的（要配合drop），拖动（or拖拽）的功能应该用mousemove事件去实现，用错事件就会觉得怎么拖拽功能好难啊。
P.S.
drag和mousemove事件都是在移动鼠标的过程中触发，所以两个事件是会冲突的，如果发现其中一个事件不生效，可以检查下是不是因为有元素绑定了其中一个事件，导致另一个事件没有trigger。
具体实现
拖放，拖拽和放置，那么自然需要一个拖拽的区域，和一个放置的区域。
首先，要定义允许拖拽的元素。浏览器的默认行为是，文本、图像和链接是允许拖拽的。即、<img>、标签是默认允许拖拽的，其他元素要允许拖拽，则要设置draggle="true"。这个属性不允许简写。并不会生效。
其次，要定义拖拽的数据。比如，拖拽的是文本，则设置成文本格式，并设置拖拽的数据内容。拖拽的是图片，则设置成图片格式，设置数据内容。定义成图片格式，那么拖拽的时候，鼠标旁边就会显示一张设置的图片。设置的拖拽数据可以有多个。
先给拖拽的元素绑定dragstart事件，再设置dataTransfer。示例代码如下：
function dragstart_handler(ev) {
// 添加拖拽数据
ev.dataTransfer.setData("text/plain", ev.target.innerText);
ev.dataTransfer.setData("text/html", ev.target.outerHTML);
ev.dataTransfer.setData(
"text/uri-list",
ev.target.ownerDocument.location.href,
);
} 拖放相关的事件对象event中，有一个dataTranster属性，这个属性保存着拖放过程中的数据。并有一些属性和方法设置和操作这些数据。
比较常用到的属性和方法有：
dropEffect：设置放置操作的类型，可以修改放置时鼠标的显示。比如设置成none，鼠标就会显示成禁止的样式。
effectAllowed：设置拖放过程的操作类型，同样影响鼠标的显示。
setData()：设置拖放的数据。一般会在dragstart事件中用到。一个事件中，setData可以设置多个数据。但同类型的数据只能添加一项，重复添加会被最后添加的覆盖。
getData()：检索获取拖放的数据。一般会在drop事件中用到。
具体可以参考MDN文档。
最后，就是在drop区域中放置拖拽的元素。
一个代码示例：
function drop_handler(ev) {
const data = ev.dataTransfer.getData("text/plain");
ev.target.textContent = data;
} 这样，拖放就结束了。拖放功能也完成了。
在拖放过程中，有一些全局事件触发，可以参考下表，具体请查看MDN文档。
事件触发时刻drag当拖拽元素或选中的文本时触发。dragend当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). dragenter当拖拽元素或选中的文本刚进入到一个可释放目标时触发。dragleave当拖拽元素或选中的文本离开一个可释放目标时触发。dragover当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。dragstart当用户开始拖拽一个元素或选中的文本时触发。drop当元素或选中的文本在可释放目标上被释放时触发。一些问题
但是，这样实现拖放功能会有一些体验问题，鼠标的样式显示可能不正确。
以下是一些可能的问题：
1.禁止放置的区域没有显示禁止图标。
在区域上绑定dragover事件，设置dataTransfer.dropEffect='none'并禁止默认行为e.preventDefault()。
2.禁止放置的区域可以放置。
通常默认可以放置的区域是一些输入标签，比如、。在drop事件中，禁止默认行为e.preventDefault()可以禁止放置。
3.拖拽过程和可放置区域中，鼠标显示禁止图标。
在经过或者放置的区域上，在dragover和dragenter事件中禁止默认行为e.preventDefault()，设置dataTransfer为none以外的值。
4.拖拽图片时，鼠标旁边没有出现图片。
要在dragstart事件中，设置dataTransfer为图片类型才会显示一张图片。如果拖拽的不是图片，但是希望拖拽时有拖拽元素的图片效果显示，也可以设置dataTransfer为图片，设置要显示的图片效果，然后再设置其他的数据。dataTransfer.setData()方法是可以设置多个类型的数据的。
这样拖放功能的实现基本就完善了。最后在开始拖拽和放置的时候，可能会给拖拽元素和放置区域设置一些高亮的css效果，整个拖放功能的体验就会很流畅。
参考：
draggable属性：draggable - HTML（超文本标记语言） | MDN (mozilla.org)
拖放API：HTML 拖放 API - Web API | MDN (mozilla.org)
DataTransfer：DataTransfer - Web API | MDN (mozilla.org)
来源:https://www.cnblogs.com/-867259206/p/18162266
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]