拖放API
H5之前没有拖放API,可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。
H5之后专门提供了七个鼠标拖动相关事件句柄:
拖动的源对象(source)可能触发的事件:
dragstart:拖动开始
drag:拖动中
dragend:拖动结束
拖动的目标对象(target)可能触发的事件:
dragenter:拖动进入
dragover:拖动悬停
drop:松手释放
dragleave:拖动离开
注意:拖放API事件句柄中所有的事件对象都有一个dataTransfer属性(数据运输对象),用于在源对象和目标对象间传递数据。
源对象:event.dataTransfer.setData(key, value)
目标对象:var value = event.dataTransfer.getData(key)