html5拖拽时,event的DataTransfer对象的详细说明收藏

文章标签: 拖拽
  • :
  • 03-19 12:11
  • :
  • 113次
  • :
  • 0条
  • 1赞

简介本文讲的是HTML5拖拽相关的DataTransfer对象的详细属性。

在使用HTML5的拖拽功能时,在获取拖拽的文件的相关信息时,要用到event对象的DataTransfer

下面站长来整理一下DataTransfer的相关属性和方法:

1.dataTransfer.dropEffect  设置或返回拖放目标上允许发生的拖放行为。
如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。
该属性值只允许为“none”、“copy”、“link”和“move”四值之一。

    none :  禁止放置(禁止任何操作)
    copy :  复制到新的位置
    link  :   建立一个源位置到新位置的链接
    move  :  移动到新的位置

2.dataTransfer.effectAllowed  : 设置或返回被拖动元素允许发生的拖动行为。
该属性值可设为none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。

    none : 此项表示不允许放下(禁止任何操作)
    copy : 允许复制
    copyLink : 允许 copy 或者 link 操作
    copyMove : 允许 copy 或者 move 操作
    link : 允许在新地方建立与源的链接
    linkMove : 允许 link 或者 move 操作
    move : 允许移动到新的位置
    all : 允许所有操作
    uninitialized: 缺省值(默认值), 相当于 all

3.dataTransfer.items : 该属性返回DataTransferItems对象,该对象代表了拖动数据。

4.dataTransfer.setDragImage(element,x,y)  : 设置拖放操作的自定义图标。其中element设置自定义图表,x,y分别为鼠标水平方向和竖直方向的距离。

5.dataTransfer.addElement(element) : 添加自定义图标。

6.dataTransfer.types  : 该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。

7.dataTransfer.getData(ormat) : 获取DataTransfer对象中format格式的数据。

8.dataTransfer.setData(format,data)向DataTransfer对象中设置format格式的数据。

    format : DOMString类型数据,DOMString可以理解为string类型;
关于DOMString,站长找了很多的资料,没找到什么有用的信息,大家记住这里经常用的是 "Text"或 "text/plain"就行了。

    data : DOMString类型数据,规定要添加到数据项的数据;

9.dataTransfer.clearData([format]) :清除DataTransfer对象中format格式的数据,如果省略format,则清楚全部数据。

好了 ,关于DataTransfer对象的常用属性和方法就是上面这些了,希望能对看到这篇文章的你,有所帮助!

下面是几个相关的实例:

jquery拖拽上传,并预览图片的具体方法及实例

jquery里,把一段文字“拖拽”到DIV里的特效

jquery拖拽实例:让一张图片在两个DIV里来回拖拽

掌握和学习HTML5里和拖拽相关的七个事件

如果你想要了解和学习更多关于jquery 拖动的内容,可以看这里:jquery 拖拽  ,这里有很多和jquery拖拽相关的实例及技巧!



您正在找的文章可能是: