说一下html5 drag api,HTML5 DragAPI
在提出dragAPI之前,我们可以通过鼠标事件以及事件目标来实现拖动或与拖动相关的数据处理。
一、实现拖放
首先将要拖放的元素的draggable属性设为true(draggable = 'true'),另外,img 和 a 元素(必须指定 href)的draggable属性默认就是true。
其次关于拖放存在以下几个事件
事件
产生事件的元素
描述
dragstart
被拖放的元素
开始拖放操作
drag
被拖放的元素
拖放过程中
dragenter
拖放过程中鼠标经过的元素
被拖放的元素开始进入本元素的范围内
dragover
拖放过程中鼠标经过的元素
被拖放的元素正在本元素范围内移动
dragleave
拖放构成中鼠标经过的元素
拖放的元素离开本元素的范围
drop
拖放的目标元素
有其他元素被拖放到本元素中
dragend
拖放的对象元素
拖放操作结束
我们现在举个例子,实现的需求是,界面上有两个div(dragee,dragrec),如果我们把dragee拖放到dragrec中记录被拖放的次数。
实现过程如下,(PS:请在chrome中执行,因为ff不支持preventDefault方法等,课更改returnvalue来兼容ff)
1 DOCTYPE html>
2
3
4
5
7
8
dragAPItitle>
9
10
11
12
13
14 15 functioninit(){16 vardragme=document.getElementById('dragee');17 vardragRec=document.getElementById('drager');18 vari= 0;;19 20 dragme.addEventListener('dragstart',function(e){21 vardt=e.dataTransfer;//datatransfer 表示拖放时要携带的数据22 dt.effectAllowed= 'all';23 //effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized24 //effectAllowed表示携带数据能允许 拖放的操作类型。25 i++;26 dt.setData('text/plain',"你好,我被拖放了"+i+"次");27 },false);28 dragRec.addEventListener('dragend',function(e){29 e.preventDefault();30 },false);31 32 dragRec.addEventListener('drop',function(e){33 vardt=e.dataTransfer;34 vartext=dt.getData('text/plain');35 if(i==1){36 dragRec.innerHTML= "";37 }38 dragRec.innerHTML+=text;39 e.preventDefault();40 e.stopPropagation();41 },false);42 }43 document.οndragοver= function(e){e.preventDefault();};44 document.οndrοp= function(e){e.preventDefault();};45 script>
46 head>
47
48 请托我div>
49 拖到我身上div>
50 body>
51 html>
值得注意的几件事:
首先:针对要拖放的目标元素,必须在dragend或者dragover事件中调用"e.preventDefault()",因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认方法关掉,还有就是setData和getData方法的参数需要注意一下。
目前拖放API所支持的MIME类型包括:
text/plain 文本文字
text/html HTML文字
text/xml XML文字
text/uri-list URL列表,每个URL为一行。
其次:让我们来跟调一下,特别关注一下dataTransfer属性,请看下图,
我们可以看见dataTransfer对象的原型链中,_proto_指向的是Clipboard,constructor指向的是 function Clipboard(){}函数,我们可以认为dataTransfer继承了clipboard,因此也会拥有clipboard的公共方法,所以我们还可以针对这个原理做点其他的事情...
说一下html5 drag api,HTML5 DragAPI相关推荐
- html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
- html5 drag this,HTML5拖放(drag和drog)
拖放(drag和drog)是HTML5的标准的组成部分,也是种常见的特性,意义为抓起一个元素放入到另外的一个位置,在HTML5中任何元素都可以被拖放,前题是要相关进行设置. 1.设置元素为可拖放,也就 ...
- 【drag】HTML5 drag API
1.将想要拖放的对象元素的draggable属性设置为true.另外,img元素和a元素必须指定href,默认允许拖放. 2.编写与拖放有关的事件处理代码.关于拖放存在如下表所示的几个事件: 事件 产 ...
- html5 打印api,HTML5的API(一)
API,简单来讲就是接口. DOM是html给js的接口,BOM是浏览器给html的接口. 列举下HTML5中的API: 1.canvas(具体内容见:https://my.oschina.net/u ...
- html5之api,HTML5之API(示例代码)
HTML5就是牛,可以直接播放音视频,还可以作图: 一.HTML5中播放视频和音频: 加载时直接播放音频的方式:new Audio("BY2.mp3").play(); 播放器 视 ...
- html5直播api,HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- html5 地理api,HTML5地理定位-Geolocation API
HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息 Geolocation API使用方法: 1.判断是否支持 navigator.ge ...
- html5 indexdb api,html5 indexDB实例
IndexedDB是用于客户端的大量的结构化数据存储和使用索引高效率搜索数据的API,它是基于W3C拟定的草案索引数据库的API.相对DOM存储的小存储数据量,IndexedDB具有大容量的数据存储功 ...
- html5 dom api,HTML5 DOM File API
访问选中的文件 简单的html代码: 通过File API,我们可以在用户选取一个或者多个文件之后(如果你的程序可以让用户选择多个文件,记得要在input元素上加上multiple属性),访问到代表了 ...
- html5在线api,HTML5+ API Reference
Push模块管理推送消息功能,可以实现在线.离线的消息推送,通过plus.push可获取推送消息管理对象. 方法: 对象: ClientInfo: JSON对象,获取的客户端标识信息 PushMess ...
最新文章
- ASP.NET导出文件FileResult的使用
- 一文弄懂神经网络中的反向传播法——BackPropagation【转】
- Fedora 20 安装后的一些事情
- 如何用jar命令对java工程进行打包
- 张勇云栖大会谈科技担当与责任:做开放共享人人受益的好科技
- 华科10年保送生计算机考研复试机试
- [转载] json.dumps()和json.dump()的用法和区别
- c#操作txt文本之查询
- 用foobar2000播放服务器文件,用Foobar2000打造网络电台
- 武汉加油!爬取百度迁徙地图数据+城市出行强度
- 大数据在职研究生哪个好_在职研究生大数据专业怎么样?
- composer require fxp/composer-asset-plugin 失败
- 用X64 Native tools command promt for vs安装ROS
- python wx窗体界面
- imx6ull移植Linux系统第二篇——Linux内核的移植
- ensp防火墙出口路由双链路运营商,负载分担及设备冗余
- 怎么利用粉丝圈这个微信社区工具做好社群营销?我们是做教育行业
- Linux中正则表达式与文件格式化处理命令(awk/grep/sed)
- Matlab中实现圆形矩阵,圆外为0
- 移动渠道巨变:应用商店式微,超级 App 内分发崛起