HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象

[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了。今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用。

dataTransfer对象

之前的一篇文章中也有提及到dataTransfer对象,那会只是想通过dataTransfer对象来将被拖拽元素的id进行传递,使得目标元素可以通过相应的dataTransfer对象来获取id进行对应操作。

成员表

属性 描述
dropEffect 设置或获取拖曳操作的类型和要显示的光标类型。
effectAllowed 设置或获取数据传送操作可应用于该对象的源元素。
方法 描述
clearData(sFormat) 通过 dataTransfer 对象从剪贴板删除一种或多种数据格式。
getData(sFormat) 通过 dataTransfer 对象从剪贴板获取指定格式的数据。
setData(sFormat,sData) 以指定格式给 dataTransfer 对象赋予数据。 sFormat: URL, Text
setDragImge(element, x, y) element:指定一个对象,当拖动发生的时候,显示在光标下方。x:x轴偏移量。y:y轴偏移量。


属性

这个两个属性对于初次接触DnD的朋友来说,可谓最令人摸不着头脑的,网上和各书籍上对这两个属性的解释均不全面,下面我试图尽量把它们讲明白。

effectAllowed 和 dropEffect 最主要的作用是,用于配置拖拽操作过程中鼠标指针的类型以便提示用户后续可执行怎样的操作;其次的作用是,控制 drop 事件的触发与否。


dropEffect

作用:用于设置目标元素将执行的操作,若属性值属于 effectAllowed 范围内,则鼠标指针将显示对应的指针样式,否则则显示禁止的指针样式。

   取值范围:

copy :被拖拽元素将被复制到目标元素内,若属于 effectAllowed 范围内时,则鼠标指针显示复制的样式,否则则显示禁止的指针样式。

    link :被拖拽元素将以超链接的形式打开资源,若属于 effectAllowed  范围内时,则鼠标指针显示超链接的样式,否则则显示禁止的指针样式。

move :被拖拽元素将被移动到目标元素内,若属于 effectAllowed   范围内时,则鼠标指针显示移动的样式,否则则显示禁止的指针样式。

none :被拖拽元素不能在目标元素上作任何操作,一直显示禁止的指针样式。除了文本框外其他元素的默认值均为none

注意:   

  1. 仅能在 dragover 事件中设置该属性值,其他事件中设置均无效

  2. 当显示禁止的指针样式时,将无法触发目标元素的 drop 事件。


effectAllowed

作用:用于设置被拖拽元素可执行的操作。

取值范围:

   copy ,限定dropEffect的属性值为copy,否则会鼠标指针为禁止样式

       link ,限定dropEffect的属性值为link,否则会鼠标指针为禁止样式

move ,限定dropEffect的属性值为move,否则会鼠标指针为禁止样式

copyLink ,限定dropEffect的属性值为copy和link,否则会鼠标指针为禁止样式

copyMove ,限定dropEffect的属性值为copy和move,否则会鼠标指针为禁止样式

linkMove ,限定dropEffect的属性值为link和move,否则会鼠标指针为禁止样式

       all ,允许dropEffect的属性值为任意值

none ,鼠标指针一直为禁止样式,不管dropEffect的属性值是什么

uninitialized ,没有限定dropEffect属性的值,效果和 all 一样。

注意:仅能在 dragstart 事件中设置该属性,其他事件中设置均无效。


小结

目前只先写罗列了新的属性,后续补坑。

时间: 2024-11-10 13:45:17

HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象的相关文章

HTML5 拖放---drag和drop

拖放四步走:第一步:设置元素可拖放,即把 draggable属性设置为 true:  例:<div id="div" draggable="true"></div>第二部:拖动什么--ondragstrat和setData()  例:function drag(ev){         ev.dataTransfer.setData("Text",ev.target.id);      }上例中,数据类型是“Text”,值

基于HTML5的Drag and Drop生成图片Base64信息

直击现场 基于HTML5的Drag and Drop生成图片Base64信息 发表于4个月前(2014-12-19 00:58)   阅读(103) | 评论(0) 11人收藏此文章, 我要收藏 赞0 慕课网,程序员升职加薪神器,点击免费学习 摘要 HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信

RCP开发浅谈之SWT,JFACE

RCP开发浅谈之SWT,JFACE SWT 什么是SWT? SWT全名是Standard Widget Toolkit是一个开源的GUI编程框架,我们每一个java开发者,在学习java开发的时候都会接触到awt以及swing这两个图形库,与awt,swing两个图形库不同,swt的优势体现于底层调用本地的图形库,大大提高了运行速度(损失了一定跨平台性).SWT的一个很重要的一点,一个控件并不是单独存在的,而是存在于父控件中.这样当父控件disposed后,子控件也一定很disposed了.每一

Android开发-浅谈架构(二)

写在前面的话 我记得有一期罗胖的<罗辑思维>中他提到 我们在这个碎片化 充满焦虑的时代该怎么学习--用30%的时间 了解70%该领域的知识然后迅速转移芳草鲜美的地方 像游牧民族那样.原话应该不是这样,但是我想说的是 自从我想写一些笔记记录知识的时候 为了不误导其他人 我不得不参考github 一些比较知名大牛的代码.在这个过程中 我下载过很多demo.一点一点的啃 汲取精华的部分 当然也充满疑惑.后来觉得标题取得有点大了 我应该取"学习"类的标题才对.但是另一方面我也只能就

浅谈 js 对象 toJSON 方法

前些天在<浅谈 JSON.stringify 方法>说了他的正确使用姿势,今天来说下 toJSON 方法吧.其实我觉得这货跟 toString 一个道理,他是给 stringify 方法字符串化的时候调用的.看下 MDN 官方文档吧<toJSON behavior>.非常简单,但是要注意的是他和 stringify 方法第二个参数稍微有点不同.因为 stringify 第二个参数是回调函数时,只是对当前 key 对应的值进行修改.而 toJSON 则是对当前对象进行修改.例如: v

使用HTML5本地 Drag和Drop API(native API)

人人都爱使用方便..具有互动的用户界面.并且随着智能手机的引入,用户的期望瞬间高了一大截.他们希望网站一目了然,交互动作尽人皆知.总之,他们希望你的网站使用起来超级简单. 让你的用户能在你的网站实现拖拽之类的操作吧,这会让你的网站更加具有交互性.因为人们都知道如何把东西从X拖到Y位置,知道如果把A拖到B前面的话,那么A就会先显示出来. 处理拖动,拖入之类的操作以前总是javascript的事情,开发者们早先也有自己的方法构建交互动作或者使用预制解决方案.随着HTML5 Drag和Drop API

通过HTML5的Drag and Drop生成拓扑图片Base64信息

HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的

HTML5拖放(drag和drog)

拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就是把drapgable属性设置为true 2.拖动什么-ondragstart和setData(),规定元素被拖动时会发生什么? (1):ondragstart属性调用了一个函数drag(event),它规定了被拖动的数据. (2):dataTransfer.setData()方法设置被拖动数据的数

在QML应用中如何实现drag and drop功能

在这篇文章中,我们将展示如何在QML应用中实现drag and drop的功能.更多的阅读可以参照Qt SDK. 在这里,我们首先设计一个DropTile.qml DropTile.qml import QtQuick 2.0 DropArea { id: dragTarget property string colorKey property alias dropProxy: dragTarget width: mainpage.width/4 - units.gu(1) height: wi