html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能。你可以抓住一个对象,并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件。在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都支持。正因为这个功能太普遍了,所有的主流浏览器都支持这个操作。
启用拖拽-draggable属性
非常简单,只需要将一个元素的拖动属性修改为draggable,这个元素就支持拖动了,如下所示:
复制代码代码如下:
拖动中数据的传递
拖动的过程中,我们往往需要传递相应的逻辑数据来完成转换的过程,这里主要是使用dataTransfer对象进行数据传递,下面先看看它的成员:
方法成员:
复制代码代码如下:
setData(format,data):把被拖动的数据赋值给dataTransfer对象。
format:一个String型参数,指定被拖动数据的类型。该参数取值可以是“Text”(文本类型)和“URL”(URL类型)。该参数是大小写无关的,所以传入"text"与"Text"是一样的。
data:一个变体类型参数,指定被拖动的数据。该数据可以是文本,图片路径,URL等等。
该函数有Boolean类型的返回值,true表示数据成功加到dataTransfer中,false代表不成功。如果需要,可以通过这个参数来决定是否应该继续执行某些逻辑。
复制代码代码如下:
getData(format):获取dataTransfer中存放的拖动数据。
format意义与setData中的一样,取值可以是"Text"(文本类型)和"URL"(URL类型)。
复制代码代码如下:
clearData(format):移除指定类型的数据。
这里的format除了上面可以指定的"Text"(文本类型)和"URL"(URL类型)外,还可以取下列值:file-文件,html-html元素,image-图片。
这个方法可以用于去选择性的处理拖动的数据类型。
属性成员:
复制代码代码如下:
effectAllowed:设置或获取数据源元素中的数据可以执行的操作。
属性类型为字符串,取值范围如下:
"copy"-复制数据.
"link"-链接数据.
"move"-移动数据
"copyLink"-复制或链接数据,由目标对象来确定。
"copyMove"-复制或移动数据,由目标对象来确定。
"linkMove"-链接或移动数据,由目标对象来确定。
"all"-所有的操作都是支持的。
"none"-禁止拖动。
"uninitialized"-默认值,采用默认的行为。
注意设置effectAllowed为none以后,拖动是禁止的,但是鼠标形状还是显示没有可拖动的对象的形状,如果想不显示这个鼠标形状,则需要将window的event事件的属性returnValue设置为false。
复制代码代码如下:
dropEffect:设置或获取拖动的目标上允许的操作以及相关的鼠标形状。
属性类型为字符串,取值范围如下:
"copy"-鼠标显示为复制时的形状;
"link"-鼠标显示为连接的形状;
"move"-鼠标显示为移动的形状。
"none"(默认值)-鼠标显示为没有拖动的形状。
effectAllowed指定了数据源支持的操作,所以通常在ondragstart事件中指定。dropEffect指定了拖动放置的目标支持的操作,所以与effectAllowed配合,通常在拖动的目标上的ondragenter,ondragover和ondrop等事件中使用。
复制代码代码如下:
files:返回拖动的文件的列表FileList。
types:ondragstart中发送的数据(被拖动的数据)类型的列表。
dataTransfer对象的存在,使得在拖动的数据源和目标元素之间传递逻辑数据变成了可能。通常我们使用setData方法在数据源元素的ondragstart事件中提供数据,然后再目标元素中,使用getData方法获取数据。
拖动中触发的事件
下面是一次拖拽会发生的事件,基本上事件的触发顺序也就是下面的顺序:
复制代码代码如下:
dragstart:要被拖拽的元素开始拖拽时触发,这个事件对象是被拖拽元素。
drag:拖拽元素时触发,这个事件对象是被拖拽元素。
dragenter:拖拽元素进入目标元素时触发,这个事件对象是目标元素。
dragover:拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素。
dragleave:拖拽某元素离开目标元素时触发,这个事件对象是目标元素。
drop:将被拖拽元素放在目标元素内时触发,这个事件对象是目标元素。
dragend:在drop之后触发,就是拖拽完毕时触发,这个事件对象是被拖拽元素。
基本上事件的参数event都会传入相关的元素,可以很方便的进行一些修改。这里,我们并不需要处理每个事件,通常只需要挂接主要的几个事件即可。
拖动开始-ondragstart事件
从这个事件传入的参数含有的信息非常丰富,从中可以很方便的获取到被拖动的元素(event.Target);从中可以设置被拖动数据(event.dataTransfer.setData);所以你可以很方便实现拖动的背后逻辑(当然你绑定的时候也可以传递其他的参数)。
拖动过程中-ondrag,ondragover,ondragenter和ondragleave事件ondrag事件的对象是被拖拽元素,通常这个事件处理的比较少。ondragenter事件是当拖动进入当前元素时发生,ondragleave事件是在当拖动离开当前元素时发生,ondragover事件是在拖动在当前元素中移动时发生。
这里只需要注意一点,因为默认情况下,浏览器是禁止元素drop的,所以为了让元素可以drop,需要在这个函数中返回false或者调用event.preventDefault()方法。如下面的例子所示。
拖动结束-ondrop,ondragend事件
当可拖动的数据被drop的时候,drop事件触发。drop结束后,dragend事件被触发,这个事件使用的也相对少一点。
看一个简单的例子:
复制代码代码如下:
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述相关推荐
- 突袭HTML5之Javascript API扩展4 - 拖拽
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域. 很多javascript都类似实现了相关的功能,例如,jQueryUI的drag and drop组件.在 ...
- HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
- HTML5原生拖拽/拖放(drag drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- html5拖放详解,HTML5拖拽/拖放(drag drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - drag 在元 ...
- HTML5 drag drop 拖拽与拖放简介
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1419 一.前面的话 ...
- 笔记十三 :Egret拖拽对象与吸附对象(基于通用MVC框架)
前言:拖拽对象是2D游戏中常用的一个功能,例如<植物大战僵尸>中种植植物的表现形式,拖拽植物卡片种植到相应的地点. 思路:在Egret中实现拖拽对象,需要用到TOUCH_MOVE事件的监听 ...
- Unity 从UI中拖拽对象放置并拖动
需求:点击UI,在场景中生成3D对象,对象跟随鼠标移动,放置后可再次拖拽对象,改变其位置.做了一个小Demo,如下图所示: 实现大致思路: 射线碰撞检测 对象空间坐标变换(世界坐标->屏幕坐标. ...
- html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件
draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件.该模态窗口插件使用纯js编写,模态窗口可以任意进行拖动,并且模态窗口可以全屏放大,或左右对齐占据半 ...
- draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
最新文章
- iOS进阶之底层原理-线程与进程、gcd
- 160525、高并发之mysql主从复制(linux)
- Dataset之MapillaryVistas:MapillaryVistas数据集的简介、下载、使用方法之详细攻略
- HDU 5608 function (杜教筛)
- Android软键盘弹出时,覆盖布局,不是把布局顶上去的解决方法
- jQuery.ajaxPrefilter()函数的使用
- PHP操作Mongodb API 及使用类 封装好的MongoDB操作类
- 康柏川(帮别人名字作诗)
- 还在迷茫于前端如何入门和进阶?万字指南让你不再迷茫!
- c 调用python clion_CLion 2018.1.3 功能超级强大的跨平台 C 开发工具
- 10 个优秀的JavaScript开发框架
- c++ 使用nacos_使用SpringBoot和Seata实现Dubbo分布式事务管理
- 表上作业法matlab解决,MATLAB上机作业.doc
- Tomcat 修改端口
- PDF怎么转换成CAD?教你几步轻松掌握
- dwg格式的计算机图,例举电脑dwg文件怎么打开
- 数据时代,大数据未来的发展趋势主要有哪些?
- 熊乃学 计算机,吴谋博士研究成果在权威期刊在线发表
- 【HTML】极简个人主页设计
- 数据结构练习题——线性表