HTML5 拖动
触发的事件有：dragstart事件、drag事件和dragend事件。
按下鼠标键并开始移动鼠标的时候，会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线)，表示不能把元素放在自己上门。拖拽开始时，可以通过ondragstart事件处理程序运行JavaScript代码。
触发dragstart事件后，随即会触发drag事件，而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。当拖动停止时(无论把元素放到了有效的放置目标，还是放到了无效的放置目标上)，都会发生dragend事件。
上面说的三个事件的目标都是被拖动的元素触发。默认情况下，浏览器不会再拖动期间改变被拖动元素的外观。但是可以自行修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随光标移动。当某个元素被拖动到一个有效的放置目标的时候，会触发的事件有：dragenter事件、dragover事件和dragleave或者drop事件。
只要有元素被拖动到放置目标上，就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件，而且在被拖动的元素还在放置目标的范围内移动是，会连续触发dragover事件。如果元素被拖出放置目标，dragover事件不再发生，但是会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中会触发drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目标都是作为放置目标的元素。
自定义放置目标
在拖动元素经过某些无效放置目标的时候，可以看到一种特殊鼠标手势(圆环中一条反斜线)，表示不能放置。虽然所有元素都支持放置目标事件，但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生drop事件。不过，你可以把任何元素变成有效的放置目标，方法是重写dragenter和dragover事件的默认行为。
重写了默认行为之后，就会发现当拖动着元素移动到放置目标上的时候，光标变成允许放置的符号。在Firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上，页面就会转向图像文件。如果是把文本拖放到放置目标上，则会导致无效url错误。所以为了让Firefox支持政正常的拖放，还要取消drop事件的默认行为，阻止打开拖拽元素的URL。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 拖动</title>
<style type="text/css">
.box { width: 500px; padding: 10px; border: 1px solid #aaaaaa; height: 70px; }
#drag { background-color: #090; height: 70px; width: 150px; font-family: Arial; font-size: 14px; color: #FFF; text-align: center; line-height: 70px; }
</style>
<script type="text/javascript">
Object.prototype.startDrag=function(drop,callback){
this.draggable=true;
this.addEventListener('dragstart',function(e){
e.dataTransfer.setData('Text',e.target.id);
});
drop.addEventListener('dragover',function(e){
e.preventDefault();
});
drop.addEventListener('drop',function(e){
e.preventDefault();
this.dataTransfer={
target:document.getElementById(e.dataTransfer.getData('Text'))
};
callback(this);
});} window.onload = function() {
var drop = document.getElementById('box');
var drag = document.getElementById('drag');
drag.startDrag(drop, function(e){
e.appendChild(e.dataTransfer.target);
}); drag.startDrag(document.getElementById('boxrr'), function(e){
e.appendChild(e.dataTransfer.target);
}); }
</script>
</head>
<body>
<div id="box" class="box"></div>
<p> </p>
<div id="boxrr" class="box"></div>
<br />
<div id="drag">Drag it</div>
</body>
</html>
FQ出去问了下谷歌找到了DataTransfer的API，下面就介绍一下：
DataTransfer
拖拽数据传递对象，一般使用方式event.dataTransfer。
dataTransfer . dropEffect [ = value ]
拖拽效果，可选值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all”, and “uninitialized”。
dataTransfer . items
拖拽的数据集合，是一个数组。
dataTransfer . setDragImage (element, x, y)
Uses the given element to update the drag feedback, replacing any previously specified feedback.
英文有点拗口，就是拖拽过程中定义一个元素替换原有的，可以看到拖拽元素跟随的效果。
dataTransfer . addElement (element)
Adds the given element to the list of elements used to render the drag feedback.
dataTransfer . types
Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string “Files”.
data = dataTransfer . getData (format)
Returns the specified data. If there is no such data, returns the empty string.
获取自定义的数据格式，如ev.dataTransfer.getData("text");通常是配合ev.dataTransfer.setData使用。
dataTransfer . setData (format, data)
Adds the specified data.
添加自定义数据格式，如ev.dataTransfer.setData("text", ev.target.innerHTML);有点像jquery里面的data
dataTransfer . clearData ( [ format ] )
Removes the data of the specified formats. Removes all data if the argument is omitted.
清除自定义的数据格式及其数据。
dataTransfer . files
Returns a FileList of the files being dragged, if any.
拖拽的文件列表对象。
可参考，里面讲解很细：http://www.cnblogs.com/fsjohnhuang/p/3961066.html
HTML5 拖动的更多相关文章
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- html5拖动文件上传
使用html5的fileReader api <!DOCTYPE html><html lang="en"><head> <meta ch ...
- html5拖动滑块
html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...
- HTML5拖动画布/拖放
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> func ...
- HTML5拖动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- html5拖动监听
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: o ...
- HTML5学习笔记
参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> ...
- html5 “拖放”
拖放主要是两个部分组成,drag:拖动,drop:放置!既抓取元素后拖到另一个位置! 要实现拖放首先要把被拖动元素设置为可拖动,既: draggbile="true" 然后要拖动什 ...
- HTML实现文件拖动上传
在大型企业的开发过程中,很多比较有趣而实际的功能往往都是让大家望而却步,我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术: 1:记得导入:common-fileupload.jar包 ...
随机推荐
- MFC编程入门之二十三（常用控件：按钮控件的编程实例）
上一节讲了按钮控件Button.Radio Button和Check Box的基本用法,本节继续讲按钮控件的内容,通过一个实例让大家更清楚按钮控件在实际的软件开发中如何使用. 因为Button控件在前 ...
- 用js生成PDF的方案
在java里,我们常用Itext来生成pdf,在pdf文件里组合图片,文字,画表格,画线等操作,还会遇到中文支持的问题. 那好,现在想直接在web前端就生成pdf怎么办,目前有以下几个解决方案 1:J ...
- tcpdump捕捉样例
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- python3 文件增删查
#Author by Andy#_*_ coding:utf-8 _*_import sysimport timePath="E:\my python study\\files\haprox ...
- select distinct
select distinct select distinct 用于返回表中唯一不同的值. 语法 select distinct 列名称 from 表名称 使用 distinct 关键字 Studen ...
- R语言基础
一.扩展包的基本操作语句R安装好之后,默认自带了"stats" "graphics" "grDevices" "utils&qu ...
- BIND的进阶二：视图，日志，转发，子域的授权
实验分为4部分组成: 1:DNS的转发 2:DNS日志 3:子域的授权 4:智能DNS的简单配置根据网段来分配不同的ip地址 一:DNS的转发: 转发方式有两种:only (直接把客户端请 ...
- final发布评语
final发布评语: 1.约跑(nice!)发布者:组长李权以及组员刘芳芳和于淼,对于约跑APP,final发布主要完成对于用户提出的(1.对话字数多导致头像被挤掉2.返回时没有完全退出)问题修改成功 ...
- java根据标点英文分词
最近学习java字符串部分,用正则表达式做了一个简单的统计单词出现次数的小程序,目前只能统计英文. 整个程序包括三个包,分别为output,run,wordcount wordCount包 执行单词统 ...
- 51nod1265 四点共面
题目链接:51nod 1265 四点共面 四个点构成的三个向量a,b,c共面的充要条件是存在不全为零的实数x,y,z满足x*a+y*b+z*c=0,然后想到线代了.. 其实就是三个向量的混合积为0:( ...