一、元素拖放事件
1、概念
在 HTML5 中增加了多个针对元素拖放的事件,使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作,要想真正实现拖放后进行数据交互,还需要结合 dataTransfer 对象,才能真正实现拖放效果。
注意:要实现元素拖放,首先要在目标元素上 设置 draggable = “true” ,否则无法实现拖放。
2、事件
在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
- ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
二、dataTransfer 对象
1、概念
dataTransfer 对象是事件对象的一个属性,用来暂时存放被拖放的数据,只能在拖放事件的处理程序中访问该对象。不过目前不同的浏览器对该对象的支持情况不同,所以下面以谷歌浏览器为标准说明