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标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- 比特币钱包Armory使用指南
转自:http://news.yibite.com/application/2014/0525/21603.shtml 比特币钱包Armory(https://bitcoinarmory.com/)是 ...
- 面向对象之property
property功能 以调用数据属性的方式(不用加括号)调用方法 方法定义成数据属性(方法本应该是动词) # 定义property之前 class People: def __init__(self, ...
- WPF控件相对位置解析
WPF控件相对位置的获取方法是比较简单的.对于初学者来说,掌握这一技巧的应用,可以帮助以后对WPF的深入学习,而且在实际使用中,这是一个非常常用的方法. 我们知道WPF有着比较灵活的布局方式,关于某个 ...
- percona toolkit之slave工具
1:pt-slave-find ,主要是查找MySQL的层级,其实我感觉这个用处不是很大,因为层级比较多架构本身就很少,查看从库的话一般情况我们可以通过show slave hosts查看(不过不能显 ...
- Error: A JNI error has occurred, please check your installation and try again
自己写的maven项目打包以后的一个email测试类jar,放到linux上运行时报错: Error: A JNI error has occurred, please check your inst ...
- C与C++混编
了解一下C与C++如何合作,gcc和g++编译出来的东西有什么区别. 工具使用 objdump是个好工具,可以用于查看.o文件的内容,也可以查看可执行文件的内容. 查看符号表 objdump -t f ...
- 经典优秀屏幕截图录像工具FastStone Capture推荐
FastStone Capture (FSCapture) 是经典好用的屏幕截图软件,还具有图像编辑和屏幕录制两大功能. FastStone Capture 主要功能 包括:1.截图功能(可以捕捉:活 ...
- Spring Framework5.0 学习（2）-- Quick Start
官网:https://projects.spring.io/spring-framework/ Spring Framework 5.x 要求 JDK 1.8以上 1.0 在(1)的基础上,给bu ...
- MySQL语法二：数据操纵语句
数据操纵语句DML(SELECT,DELETE,UPDATE,INSERT) 一. 数据操纵语句是对数据表中的内容进行操作.比如对某个表中的某条记录或者多条记录进行增删改查操作. 一).查询 SELE ...
- php开发规范-psr系列规范
转自:http://www.cnblogs.com/x3d/p/php-psr-standards.html PSR 是PHP Standard Recommendation的简写,它其实应该叫PSR ...