拖放事件


drag and drop

Drag-and-Drop(DnD)

注意这里的拖放和鼠标事件中的拖动不是一码事,「拖放」是在「拖放源」和「拖放目标」之间传输数据的用户界面。拖放是复杂的人机交互,用于实现拖放的 API 总是很复杂。

拖放总是基于事件并且 JavaScript API 包含两个事件集,一个在拖放源上触发,一个在拖放目标上触发,所有传递给 DnD 事件处理程序的事件对象都类似鼠标事件对象,另外它拥有 dataTransfer 属性,这个属性引用 DataTransfer 对象,该对象定义 DnD API 的方法和属性。

拖放源事件很简单,任何有 HTML draggable 属性的文档元素都是拖放源,当用户开始用鼠标在拖放源上拖动时,浏览器并没有选择元素内容,相反,它在这个元素上触发 dragstart 事件。在拖动过程中,浏览器在拖放源上触发拖动事件,如果想更新拖动图片或修改提供的数据,可以监听这些事件。当放置数据发生时,会触发 dragend 事件。

拖放目标比拖放源更棘手,任何文档元素都可以是拖放目标,这不需要像拖放源一样设置 HTML 属性,只需要定义合适的事件监听程序。有四个事件会在拖放目标上触发,当拖放对象进入文档元素时,浏览器会在这个元素上触发 dragenter 事件,如果拖放目标取消了 dragenter 事件,浏览器将发送 dragover 事件表示用户继续在目标上拖动对象,如果用户移动拖放对象离开通过取消事件表明有兴趣的拖放目标,那么在拖放目标上将触发 dragleave 事件。最后,如果用户把拖放对象放置到拖放目标上,在拖放目标上会触发 drop 事件。这个事件的处理程序应该使用 dataTransfer.getData() 获取传输的数据并做一些适当的处理。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 鼠标滚轮事件

>> 下一篇: 文本输入和键盘事件