HTML5中的拖拽与拖放(drag&&drop)
1.drag
当拖动某个元素时，将会依次触发下列事件：
1）dragstart：按下鼠标键并开始移动鼠标时，会触发该事件
2）drag：dragstart触发后，随即便触发drag事件，而且在元素被拖动期间，该事件一直被触发
3）dragend：拖动停止时触发该事件
上面的事件的对象是要拖动的元素
2.drop
当某元素被拖动到某个有效的放置目标时，将会依次触发下列事件：
1）dragenter：只要有元素被拖动到该有效放置目标中，便触发该事件
2）dragover：dragenter后，随即触发dragover，且只要元素还在该有效放置目标中，该事件就会一直被触发
3）dragleave/drop：如果元素被拖出了该有效的放置目标的范围，便会触发dragleave事件；反之，如果元素被放置在该有效的放置目标范围内就会触发drop事件而不会触发dragleave事件；
上面的对象是作为放置目标的元素
3.dataTransfer对象
event的dataTransfer对象属性可以在拖放操作的同时实现数据交换。
dateTransfer中最重要的是setData()和getData()方法。getData可以取得由setData保存的值。
setData有两个参数，第一个是保存的数据的类型，第二个是要保存的数据；
getData只一个参数，是setData的第一个参数。
数据的类型支持所有MIME类型，常用的是text(text/plain)和URL(text/uri-list)类型。
eg：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>drag&&drop</title>
</head>
<style>
#testDiv{
border: 2px;
border-style: solid;
border-color: black;
width:200px;
height:200px;
}
.testImg{
width:100px;
height:100px;
}
</style>
<body>
<img id="img1" class="testImg"src="jhjh.png"/>
<img id="img2" class="testImg"src="jhjh.png"/>
<div id="testDiv"></div>
<script>
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var testDiv=document.getElementById("testDiv");
img1.addEventListener("dragstart",function(e){
e.dataTransfer.setData("Text",e.target.id);
console.log("ondragstart");
})
img2.addEventListener("dragstart",function(e){
e.dataTransfer.setData("Text",e.target.id);
console.log("ondragstart");
})
testDiv.addEventListener("dragover",function(e){
e.preventDefault();
console.log("ondragover");
})
testDiv.addEventListener("drop",function(e){
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
console.log("ondrop");
})
</script>
</body>
</html>
在上面的例子中，setData方法被绑定在被拖动的元素的dragstart阶段，而目标放置元素中，dragover事件绑定了event.preventDefault()以阻止dragover事件的默认动作（被拖动的元素回到原来位置），drop事件绑定了getData以获取setDate存储的信息，然后便可以把 被拖动的元素添加到放置目标中。
HTML5中的拖拽与拖放(drag&&drop)的更多相关文章
- html5中的拖拽功能
拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- HTML5多图片拖拽上传带进度条
前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...
- Asp.net中存储过程拖拽至dbml文件中，提示无法获得返回值
Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...
- iOS开发拓展篇—xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- iOS - xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- HTML5 drag & drop 拖拽与拖放简介
DataTransfer 对象:退拽对象用来传递的媒介,使用一般为Event.dataTransfer. draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如 ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- Redhat Linux 7.3 虚拟机通过USB挂载NTFS格式的移动硬盘
分为如下几个步骤: 一.设置本地yum,安装gcc(如果本机已经安装gcc,则跳过此步) 在虚拟机连接linux iso安装盘 查看光盘挂载情况 mkdir /iso mount /dev/cdrom ...
- arcgis api for silverlight 3.1 更新说明
前言: 查看arcgis sl api 老版本帮助的方式:http://resources.arcgis.com/en/help/silverlight-api/3.0/xxxxxxx 新版本的帮助默 ...
- 微软牛津计划——声纹识别与视频识别API上线啦！
上个月,我们发布了牛津计划机器学习的情感识别API,能够帮助不同平台的开发者轻松添加智能应用,而无需精通人工智能领域.牛津计划仅仅是微软在人工智能领域探索中的一个实例,而我们的期望是实现更加注重个人使 ...
- 在Visualsvn Server上创建svn账号和密码
VisualSVN Server是一个集成的svn服务端工具,是一款svn服务端不可多得的好工具.可以先安装好VisualSVN Server后,运行VisualSVN Server Manger,然 ...
- February 22 2017 Week 8 Wednesday
There is only one happiness in life, to love and be loved. 生命中只有一种幸福,爱与被爱. If you think you are not ...
- std::vector的内存释放
先上一段代码 using namespace std; class A{ public: ~A(){ cout << "deconstruct"; }; }; #inc ...
- sql 获取每个分组的前N条记录的写法
SELECT * FROM ( --根据 tb表的name进行分组,根据年龄排序 SELECT * , ROW_NUMBER() OVER ( PARTITION BY name ORDER BY a ...
- FBKVOController代码阅读
功能:对kvo机制进行封装,简化使用,简化内存管理: 要素:观察者.被观察者.处理函数. 模式:注册表模式: 机制:对象创建.注册管理.内存管理.处理机制转换: 其它:注册去重: kvo的管理机制:
- BZOJ1614:[USACO]Telephone Lines架设电话线(二分,最短路)
Description FarmerJohn打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司 支付一定的费用.FJ的农场周围分布着N(1<=N< ...
- 20145223 杨梦云 《网络对抗》shellcode实验+return-to-libc实验
20145223 杨梦云 <网络对抗>shellcode实验+return-to-libc实验 shellcode注入实践 Shellcode基础知识 ·Shellcode实际是一段代码( ...