HTML5元素拖放与Web Storage

一、元素拖放事件

1、概念

​        在 HTML5 中增加了多个针对元素拖放的事件，使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作，要想真正实现拖放后进行数据交互，还需要结合 dataTransfer 对象，才能真正实现拖放效果。

​ 注意：要实现元素拖放，首先要在目标元素上 设置 draggable = “true” ，否则无法实现拖放。

2、事件

在拖动目标上触发事件 (源元素):

• ondragstart - 用户开始拖动元素时触发
• ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
• ondragend - 用户完成元素拖动后触发

 释放目标时触发的事件:

• ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
• ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
• ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
• ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

二、dataTransfer 对象

1、概念

​ dataTransfer 对象是事件对象的一个属性，用来暂时存放被拖放的数据，只能在拖放事件的处理程序中访问该对象。不过目前不同的浏览器对该对象的支持情况不同，所以下面以谷歌浏览器为标准说明