【HTML5】逐步分析如何实现拖放功能

我们来看看测试效果，这里你们要仔细看被拖放元素多少面积进入或离开目标元素时才触发的对应事件

那么最后我们再来将一下如何才能触发 drop事件，只需要阻止 dragenter事件 和 dragover事件 的默认行为即可。

来看下测试效果图

值得注意的是，在我们没有对 drop事件 做处理之前，将被拖放元素拖动到目标元素中时，鼠标样式会变成禁止的样式，如图

而当我们设置元素为可放置了以后，鼠标样式是这样的。如图

三、dataTransfer对象

=========================================================================

上面只是简简单单地实现了拖放功能，但并没用利用该功能做出什么实际性的功能，这里我们介绍一个拖放事件中事件对象上的一个特别重要的属性——dataTransfer

我们通过 event.dataTransfer 来获取该对象，其主要的作用就是从被拖放元素向目标元素传递一个字符串数据

（1）方法

---

dataTransfer上有两个方法，如下表所示

| 方法 | 含义 |

| — | — |

| setData | 设置字符串，并设置数据类型 |

| getData | 获取对应数据类型的字符串 |

setData() 方法接收两个参数，第一个参数表示的是字符串的数据类型，HTML5规定了两种数据类型，分别是 text/plain 和 text/uri-list，前者表示普通字符串，后者表示URL字符串；第二个参数 就是用于存放的字符串

getData() 方法只接收一个参数，即需要接收的字符串类型

我们来简单使用一下这两个方法

来看下测试结果

（2）属性

---

在 dataTransfer对象 上还有两个比较常用的属性，如下表所示

| 属性 | 含义 |

| — | — |

| dropEffect | 被拖放元素的放置行为 |

| effectAllowed | 目标元素支持的放置行为 |

首先说一下，这个两个属性需要搭配使用，它们决定了被拖放元素 和 目标元素 之间的关系的，当设定好两者的关系后，在进行拖动操作的时候，鼠标会根据不同的关系显示不同的样式，除此之外，没有别的特别的作用。

---

dropEffect 可以设置以下几个属性

| 值 | 含义 |

| — | — |

| none | 默认值。不能把拖动的元素放在这里 |

| move | 应该把拖动的元素移动到该目标元素 |

| copy | 应该把拖动元素复制到该目标元素 |

| link | 表示目标元素会打开被拖放进来的元素对应的链接 |

【注意】：dropEffect 属性必须在 dragenter事件 中设置，否则无效

---

effectAllowed 可以设置以下几个属性

| 值 | 含义 |

| — | — |

| uninitialized | 被拖放元素没有设置放置性为 |

| none | 被拖放元素不能有放置性为 |

| copy | 只允许值为 ‘copy’ 的 dropEffect 目标元素 |

| link | 只允许值为 ‘link’ 的 dropEffect 目标元素 |

| move | 只允许值为 ‘move’ 的 dropEffect 目标元素 |

| copyLink | 只允许值为 ‘copy’ 和 ‘link’ 的 dropEffect 目标元素 |

| copymove | 只允许值为 ‘copy’ 和 ‘move’ 的 dropEffect 目标元素 |

| linkMove | 只允许值为 ‘link’ 和 ‘move’ 的 dropEffect 目标元素 |

| all | 只允许任意值的 dropEffect 目标元素 |

【注意】：effectAllowed 属性必须在 dragstart事件 中设置，否则无效

---

上面也说了，这两个属性基本上只是用来改变鼠标样式的，所以如果想实现特定的功能还得我们自己来重写事件的处理函数。

下面来看一个拖放实例：

需求： 将一段文本拖放到一个元素中

因为文本是默认支持的拖放元素，所以我们可以不对其做任何的事件绑定。

我是一段测试文字

测试动图

四、结束语

==============================================================
我是Lpyexplore，一个因Python爬虫转入前端的探索者，创作不易，喜欢的加个关注，点个收藏，给个赞~
【微信公众号】：前端印象

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发