关于HTML5的拖拽
不介绍具体情况，先看API，注意看后面括号的说明
dragstart：拖拽开始（应用于被拖拽对象）drag：拖拽中（应用于被拖拽对象）dragenter：拖拽到指定位置（应用于拖拽目标）dragleave：拖拽离开指定位置（应用于拖拽目标）dragover：拖拽在指定位置（应用于拖拽目标）drop：在指定位置释放（应用于拖拽目标）dragend：拖拽结束（应用于被拖拽对象）
|
事件 |
描述 |
目标 |
|
dragstart |
开始拖对象时触发 |
被拖动对象 |
|
dragenter |
当对象第一次被拖动到目标对象上时触发，同时表示该目标对象允许‘放’这动作 |
目标对象 |
|
dragover |
当对象拖动到目标对象时触发 |
当前目标对象 |
|
dragleave |
在拖动过程中，当被拖动对象离开目标对象时触发 |
先前目标对象 |
|
drag |
每次当对象被拖动时就会触发 |
被拖动对象 |
|
drop |
当发生“放”这动作时触发 |
当前目标对象 |
|
dragend |
在拖放过程，松开鼠标时触发 |
被拖动对象 |
使用方法
在需要被拖拽的对象上设置属性draggable="true"，但设置此属性后，对象将不能被选中。
使用范围
不是所有的object都支持的，通常支持块，比如div p span，但不支持select option等,但可以把他们放到div里面。
例子见代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var obj = document.getElementById("obj");
var left = document.getElementById("left");
var right = document.getElementById("right");
//设置拖拽的对象的光标
obj.style.cursor = "move";
obj.ondragstart = function (e) {//事件顺序：1
//设置内容，非必要,前为格式，后为值,取值为text|URL对应是text/plain|text/url-list,实际可为MIME，不同类型可同时保存
e.dataTransfer.setData("text", obj.id);
/*被拖动的元素能执行的行为，包括
none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move：应该把拖动的元素移动到放置目标。
copy：应该把拖动的元素复制到放置目标。
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。
把元素拖动到放置目标上的时候，以上每一个值都会导致光标显示为不同的符号。
*/
e.dataTransfer.dropEffect = "move";
/*仅设置dropEffect是无效的，需要结合effectAllowed，此属性表示允许拖动元素的那种行为，即移动此物体到能带有ondrop事件的物体上空时鼠标下方显示的样式，
取值如下
uninitialized：没有给被拖动元素设置任何放置行为。
none：被拖动的元素不能有任何行为
copy：只允许值为”copy”的dropEffect。
link：只允许值为”link”的dropEffect。
move：只允许值为”move”的dropEffect。
copyLink：允许值为”copy”和”link”的dropEffect。
copyMove：允许值为”copy”和”move”的dropEffect。
linkMove：允许值为”link”和”move”的dropEffect。
all：允许任意dropEffect。
要设置effectAllowed属性必须在ondragstart事件处理程序中设置。
*/
e.dataTransfer.effectAllowed = "move";
//e.dataTransfer.setDataImage(Element image,long x,long y);//设置拖拽显示的替代图像。存在兼容问题
//e.dataTransfer.addElement(Element element);//设置在拖放的同时更随拖放的对象。存在兼容问题
return true;
};
obj.ondrag = function (e) {//事件顺序：2
//只要拖着没放，就一直执行，无论在那个对象上方
};
obj.ondragend = function (e) {//事件顺序：6
//拖放完成了，清理工作
e.dataTransfer.clearData("text");//不清理应该也没问题，会自动清理
};
left.ondragenter=right.ondragenter = function (e) {//事件顺序：3
this.style.backgroundColor = "rgb(230,230,230)";
};
left.ondragover = right.ondragover = function (e) {//事件顺序：4
e.preventDefault();//必须设置，否则无法执行ondrop
//这里设置当拖动的物体在目标物体上方移动时的代码
};
left.ondragleave = right.ondragleave = function (e) {//事件顺序：5(并列)
this.style.backgroundColor = "";
}
left.ondrop = right.ondrop = function (e) {//事件顺序：5(并列)
//e.dataTransfer.files如果是文件拖拽，可以读取
this.style.backgroundColor = "";
var id = e.dataTransfer.getData("text");
var element = document.getElementById(id);
if (element.parentElement&&element.parentElement!=this)
element.parentElement.removeChild(element);
this.appendChild(element);//同一对象重复添加不会错
};
};
</script>
<div id="left" style="width:150px;height:200px;border:1px solid black;float:left;">
<span id="obj" draggable="true" style="border:2px dotted gray;">测试文字</span>
</div>
<div id="right"style="width:150px;height:200px;border:1px solid black;float:left;"> </div>
</body>
</html>
关于HTML5的拖拽的更多相关文章
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
- html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
- HTML5文件拖拽
HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...
- HTML5 实现拖拽
如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...
- html5实现拖拽文件上传
以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
随机推荐
- python3随记——字符编码
1.1什么是字节 字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符. 比特(bit)在计算机中最小的单位,在二进制位的电脑的系统中,每一b ...
- C#利用System.Net发送邮件（带 抄送、密送、附件、html格式的邮件）
net2.0后,C#可以利用System.Net发送邮件了. 代码整理如下: 3. 增加IProcessMessage类,定义了一个消息方法,用于消息传递 /********************* ...
- rqnoj378 约会计划
题目描述 cc是个超级帅哥,口才又好,rp极高(这句话似乎降rp),又非常的幽默,所以很多mm都跟他关系不错.然而,最关键的是,cc能够很好的调解各各妹妹间的关系.mm之间的关系及其复杂,cc必须严格 ...
- #define #include #undef的其中一个用法（目的）
一.背景 最近在跟一段系统级的代码,和原来单纯的下位机代码相比,真的是刘姥姥进大观园--看花了眼.相较于 之前所常见的各种下位机代码,系统级代码常常会出现深层次结构体嵌套,结构体内的各种回调函数导致对 ...
- 微信小程序开发视频教程新鲜出炉
微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...
- PHP变量入门教程（1）基础
基础 PHP 中一个美元符号后面跟上一个变量名称,即表示一个变量.变量的名称是对大小写敏感的. 变量名与 PHP 中其它的标签一样遵循相同的规则.一个有效的变量名由字母或者下划线开头,后面跟上任意数量 ...
- css的用法
Css(Cascading Style Sheets,层叠样式表)是一种页面美化方法,通过编辑Css的对象属性达到美化页面的效果.Css的操作基本单元为对象,使用CSS的感觉就像是使用C++/C中的函 ...
- MySQL MHA 搭建&测试
一:背景介绍 MHA(Master HA)是一款开源的MySQL的高可用工具,能在MySQL主从复制的基础上,实现自动化主服务器故障转移.虽然MHA试图从宕机的主服务器上保存二进制日志,但并不是总是可 ...
- 一款全兼容的播放器 videojs
[官网]http://www.videojs.com/ videojs就提供了这样一套解决方案,他是一个兼容HTML5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持h ...
- [转]Android样式的开发:shape篇
转载自Keegan小钢原文链接:http://keeganlee.me/post/android/20150830 Android样式的开发:shape篇Android样式的开发:selector篇A ...