Open taoliujun opened 3 months ago
MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
HTML Drag And Drop允许在浏览器中拖放元素。
为方便描述,假设可拖动的元素为A,可被放置的元素是B。
拖放过程的数据对象接口,由Event.dataTransfer暴露,它有如下属性:
Event.dataTransfer
拖放过程中,在B上给用户的反馈,通常在dragenter事件中设置该属性,有几个值:
dragenter
+
箭头
左镜像箭头
除了none会禁止放置行为,其他值仅仅会产生视觉表现,实际的放置行为由drop事件的回调函数里决定。
none
drop
拖放过程中,在A上给用户的反馈,通常在dragstart事件中设置该属性,有几个值:
dragstart
拖放的文件列表,返回File[],此功能可用于将文件拖动到浏览器。
File[]
拖放操作中,数据传输项的列表,返回DataTransferItemList。
DataTransferItemList
拖放的数据格式,和items的数据顺序是一一对应的。
items
还包括了一些方法:
设置、读取、清除拖拽的数据。
设置拖动中跟随鼠标的图片,默认是A的半透明图像。
一个拖动项接口。
拖动项集合接口。
拖动事件接口。
//
元素拖放过程中有一系列事件,为方便描述,假设可拖动的元素为A,可被放置的元素是B。
A的拖动行为开始。
A被拖动中,它会被连续触发。
A被拖动进了B。
A被拖动中,在B的区域内,它会被连续触发。
A被拖动离开了B。
A放在了B中。
A的拖动行为停止,比如放开了鼠标。
示例:https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html
HTML Drag And Drop
HTML Drag And Drop允许在浏览器中拖放元素。
为方便描述,假设可拖动的元素为A,可被放置的元素是B。
接口
DataTransfer
拖放过程的数据对象接口,由
Event.dataTransfer
暴露,它有如下属性:dropEffect
拖放过程中,在B上给用户的反馈,通常在
dragenter
事件中设置该属性,有几个值:+
的标志。箭头
的标志。左镜像箭头
的标志。effectAllowed
拖放过程中,在A上给用户的反馈,通常在
dragstart
事件中设置该属性,有几个值:files
拖放的文件列表,返回
File[]
,此功能可用于将文件拖动到浏览器。items
拖放操作中,数据传输项的列表,返回
DataTransferItemList
。types
拖放的数据格式,和
items
的数据顺序是一一对应的。还包括了一些方法:
setData/getData/clearData
设置、读取、清除拖拽的数据。
setDragImage
设置拖动中跟随鼠标的图片,默认是A的半透明图像。
DataTransferItem
一个拖动项接口。
DataTransferItemList
拖动项集合接口。
DragEvent
拖动事件接口。
属性和方法
//
事件
元素拖放过程中有一系列事件,为方便描述,假设可拖动的元素为A,可被放置的元素是B。
dragstart
A的拖动行为开始。
drag
A被拖动中,它会被连续触发。
dragenter
A被拖动进了B。
dragover
A被拖动中,在B的区域内,它会被连续触发。
dragleave
A被拖动离开了B。
drop
A放在了B中。
dragend
A的拖动行为停止,比如放开了鼠标。
示例
示例:https://taoliujun.github.io/example/web-api/HTML_Drag_and_Drop_API/index.html