HTML5拖放操作

拖放（Drag 和 Drop）是 HTML5 标准的组成部分。拖放顾名思义就是把一个对象抓取放到另一个位置。在HTML5中，任何元素都支持拖放。

• 浏览器支持情况

firefox，opera12，Chrome， Safari5，Microsof Edge，IE9（IE6~8是有拖放的api的，但是没有dataTrasfer对象）。

• 开启draggable属性

要想拖动网页中的一个元素，我们必须给这个元素设置draggable的属性为true。

大部分浏览器的图片和链接是默认可以拖动的。

• 拖动过程中触发的事件

在拖动的过程中会触发一系列事件。

drag ------ 被拖动元素在拖动的过程中会持续触发，给拖动元素设置该事件。
dragstart  ------ 被拖动元素在拖动开始时会触发，给拖动元素设置该事件。
dragend ------ 被拖动元素在拖动结束时会触发，给拖动元素设置该事件。
dragenter ------ 进入目标区域时会触发，给目标区域设置该事件。
dragleave ------ 离开目标区域时会触发，给目标区域设置该事件。
dragover ------ 进入目标区域时会持续触发，给目标区域设置该事件。
drop ------ 结束拖放，也就是松开鼠标时触发，目标区域或者拖动元素都可设置。

• 简单的例子

    
        
        
        
    
    
        //绑定事件形式的拖放操作
        

        

    

图.jpg

• dataTransfer对象

拖动事件有一个dataTransfer属性，它本身指向一个对象，包含了与拖动相关的各种信息。

// dataTransfer的属性
dropEffect ------ 拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed ------ 指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files ------ 包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types ------ 储存在DataTransfer对象的数据的类型。

// dataTransfer的方法
setData(format, data) ------ 在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format) ------ 从dataTransfer对象取出数据。
clearData(format) ------ 清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y) ------ 指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。

• 实例：拖动页面元素

图2.jpg

• 拖放的其他用途

拖放操作给交互本来就很少的html增加了很多乐趣，通过H5的拖放操作，我们还可以进行板块的复制，交换等，本人技术能力有限，等研究明白了一定补上。

• 资料与文献

此文资料部分参考自:
草根程序员
W3C
如想更深入了解H5的拖放，请参考以上文献。

作者：jingks
此为原创文章，请勿用在商业用途，转载请标明作者。