利用HTML5的drag&drop实现鼠标拖拽效果

鼠标拖拽效果手把手教学（HTML5版本）

目录

1. 概述
2. 一些重要的属性和事件
3. 实例

1. 概述

前段时间写了一篇基于原生Javascript实现鼠标拖拽效果的总结，那时候有个感受就是：鼠标拖拽的实现太麻烦了。如果利用原生js来实现拖拽效果的话，我们首先应该把元素偏移量（offset）、客户端大小（client）等属性弄清楚，然后在编写js的时候还要经过一些计算，才能实现。

但是，其实HTML5早就为我们准备了拖拽效果的功能，实现起来非常的简单、方便。下面来总结一下用HTML5实现鼠标拖拽效果。

2. 一些重要的属性和事件

1. draggable属性：设定元素是否可拖放
2. ondragstart属性（事件）：当被拖元素开始被拖动时，所发生的事情。一般是设定被拖元素的数据（该事件作用在被拖元素上）
3. ondragenter属性（事件）：当被拖元素进入可放置的区域时，所发生的事情(默认不能放在元素里，所以要取消默认事件)（该事件作用来可放置区域上）
4. ondragover属性（事件）：当被拖元素在可放置区域上移动时，所发生的事情(默认不能放在元素里，所以要取消默认事件)（该事件作用来可放置区域上）
5. ondrop属性（事件）：当放下被拖数据时所发生的事情（该事件作用来可放置区域上）
6. dataTransfer.setData("名字", 值)方法：设置被拖元素所携带的值（一般是被拖元素自身的html代码，也可以是其id等等），并为这个“值”设置一个“名字”
7. dataTransfer.getData("名字")方法：获取被拖元素所携带的值（利用那个“值”的“名字”）

参考

3. 实例

See the Pen HTML5 drag &drop by aLLeNxD (@AllenMinD) on CodePen.