首页 > 代码库 > JavaScript高级程序设计59.pdf
JavaScript高级程序设计59.pdf
dropEffect和effectAllowed
利用dataTransfer对象,传输数据、确定被拖动元素以及作为放置目标的元素能够接受什么操作,为此需要访问对象的两个属性dropEffect和effectAllowed
其中通过dropEffect属性可以知道被拖动元素能够执行哪种放置行为,有4个可能的值
“none”:不能把拖动的元素放到这里,这是除文本框以外所有元素的默认值
“move”:应该把拖动的元素移动到放置目标
“copy”:应该把拖动的元素复制到放置目标
“link”:表示放置目标会打开拖动的元素(但拖动元素必须是一个链接,有URL)
要使用dropEffect属性,必须在ondragenter事件处理程序中针对放置目标来设置它
dropEffect属性只有搭配effectAllowed属性才有用,effectAllowed属性表示允许拖动元素的哪种dropEffect,可能的值如下
“uninitialized”:未给被拖动的元素设置任何放置行为
“none”:被拖动的元素不能有任何行为
“copy”:只允许值为“copy”的dropEffect
“link”:只允许值为“link”的dropEffect
“move”:只允许值为“move”的dropEffect
“copyLink”:允许值为“copy”和“link”的dropEffect
“copyMove”:允许值为“copy”和“move”的dropEffect
“linkMove”:允许值为“link”和“move”的dropEffect
“all”:允许任意的dropEffect
必须在ondragstart事件处理程序中设置effectAllowed属性
可拖动
默认情况下,图像、链接和文本是可拖动的,不需编写额外的代码,让其它元素可拖动也是有可能的。
HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动,图像、链接的draggable属性自动设置为true,其他元素默认值都是false
<!--让这个元素可以拖动-->
<div draggable="true">...</div>
其他成员
HTML5规范规定dataTransfer对象还应该包含下列的方法和属性
addElement(element):为拖动操作添加一个元素。添加这个元素只影响数据,不会影响页面元素的外观
clearData(format):清除以特定格式保存的数据
setdragImage(element,x,y):指定一幅图片,当拖动发生时,显示在光标下方
types:当前保存的数据类型