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标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- 自学git心得-2
趁着最近还没忙起来,抓紧更新一下学习心得. 现在的情景是,我们已经在本地创建了一个Git仓库,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备 ...
- 利用canvas进行一个饼形图的绘制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHP开发必用的mysql那么你知道Mysql中MyISAM和InnoDB的区别吗？
构成上的区别: 每个MyISAM在磁盘上存储成三个文件.第一个文件的名字以表的名字开始,扩展名指出文件类型. .frm文件存储表定义. 数据文件的扩展名为.MYD (MYData). 索引文件的扩展名 ...
- SQL Server ->> Enable Instant File Initialization(开启文件及时初始化)
我们在安装SQL Server的时候会在指定SQL Server各个服务的运行启动账户的账户的时候看到底下有一个选项写着“Grant Perform Volume Maintenance Task p ...
- Linux ->> UBuntu 14.04 LTE下安装Hadoop 1.2.1（伪分布模式）
Hadoop的运行模式可分为单机模式.伪分布模式和分布模式. 首先无论哪种模式都需要安装JDK的,这一步之前的随笔Ubuntu 14.04 LTE下安装JDK 1.8中已经做了.这里就不多说了. 其次 ...
- 高逼格UILabel的闪烁动画效果
高逼格UILabel的闪烁动画效果 最终效果图如下: 源码: YXLabel.h 与 YXLabel.m // // YXLabel.h // // Created by YouXianMing o ...
- Python学习---高阶函数的学习
高阶函数 高阶函数:函数名可以作为参数传递输入,函数名还可以作为返回值返回 函数名可以重新赋值,因为其本身就是一个变量 函数本身就是一个对象, 函数的变量名f本身就是指向函数本身的,加上括 ...
- vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- YII2.0安装教程，数据库配置前后台 [ 2.0 版本 ]
1.首先下载yii-advanced-app-2.0.6.tgz 2.解压到D:\wamp\www\yii2目录下面将目录advanced下所有文件剪切到 D:\wamp\www\yii2 3.打开c ...
- c# HttpWebRequest与HttpWebResponse
[转]c# HttpWebRequest与HttpWebResponse 绝技 如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧. 本文章会对Http请求时的Get和 ...