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标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- 二、docker学习笔记——安装redis
前提:打开powershell(管理员) 1.官网路径 按照官网的做了,但外网无法链接,只好换个做法. 2.docker pull redis 这下载的最新版redis 3.在docker上挂载文件夹 ...
- DevExpress控件使用之多重坐标图形的绘制 z
有时候,基于对一些年份.月份的统计,需要集成多个数值指标进行分析,因此就需要把多种数据放到一个图形里面展现,也成为多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过一个例 ...
- QT的动图加载
http://blog.csdn.net/u011619422/article/details/47342403
- Eclipse启动JVM机制
1.Eclipse启动的时候,会启动一个JVM来运行eclipse(因为Eclipse是Java代码实现的) 2.Eclipse启动一个带main的主类的时候,会单独启动一个JVM来运行他. 3.Ec ...
- [原]零基础学习视频解码之FFMpeg中比较重要的函数以及数据结构
在正式开始解码练习前先了解下关于FFmpeg中比较重要的函数以及数据结构. 1. 数据结构: (1) AVFormatContext AVFormatContext是一个贯穿始终的数据结构,很多函 ...
- 全屏轮播插件 fullPage.js应用(基础版兼容IE7， 背景图版兼容IE8)
/** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2 ...
- hdu 6216 A Cubic number and A Cubic Number【数学题】
hdu 6216 A Cubic number and A Cubic Number[数学] 题意:判断一个素数是否是两个立方数之差,就是验差分.. 题解:只有相邻两立方数之差才可能,,因为x^3-y ...
- ListView实现下拉刷新（二）隐藏头布局
一.问题分析 在上一篇中,我们将头布局加到了ListView上.但是没有隐藏他.你可能会想,隐藏还不简单,直接给它设置为GONE属性不就可以了吗,在需要的时候再设定为可见.没错,这正是ListView ...
- spring集成ehcache本地缓存
1.maven依赖 <!-- ehcache 相关依赖 --> <dependency> <groupId>net.sf.ehcache</groupId&g ...
- Core Animation Manages Your App’s Content
Core Animation 是对现有图片的操作函数. https://developer.apple.com/library/content/documentation/Cocoa/Conceptu ...