博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象
阅读量:6903 次
发布时间:2019-06-27

本文共 1581 字,大约阅读时间需要 5 分钟。

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

dataTransfer对象

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

 

成员表

属性 描述
设置或获取拖曳操作的类型和要显示的光标类型。
设置或获取数据传送操作可应用于该对象的源元素。

 

方法 描述
通过 dataTransfer 对象从剪贴板删除一种或多种数据格式。
通过 dataTransfer 对象从剪贴板获取指定格式的数据。
以指定格式给 dataTransfer 对象赋予数据。 sFormat: URL, Text
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 事件中设置该属性,其他事件中设置均无效。


 

小结

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

转载于:https://www.cnblogs.com/ijjyo/p/4316232.html

你可能感兴趣的文章
云计算的特性有这4点
查看>>
IT兄弟连 JavaWeb教程 jQuery对AJAX的支持
查看>>
Windows SqlServer 2008服务1433端口不监听问题排查
查看>>
oracle 11g rac安装之oracle database报错解决
查看>>
linux固定用户访问ip限制
查看>>
华为SSH配置
查看>>
比较好用的dns列表
查看>>
linux下mysql的root密码忘记解决方法
查看>>
多机调度问题-贪心算法
查看>>
sql_trace的使用
查看>>
我的友情链接
查看>>
WordPress 禁用自动保存、文章多个版本
查看>>
JDK环境配置
查看>>
修改Linux中的root密码
查看>>
搭建本地yum仓库
查看>>
CentOS7 源码编译安装稳定LNMP环境 支持Zabbix
查看>>
常用软件包下载网址
查看>>
Vagrant中Apache或Nginx,修改css/js等静态文件不生效的解决方案
查看>>
Arduino学习笔记01——单个LED灯闪烁
查看>>
学习linux计划书
查看>>