首页 > 代码库 > 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:当前保存的数据类型