HTML5中的拖放
关于HTML5中的拖放
拖放（Drag 和 Drop）是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的组成部分。在HTML5中用户可以使用鼠标选择一个可拖动元素，将元素拖动到一个可放置元素，并通过释放鼠标按钮放到这些元素。在拖动操作期间，可拖动元素的半透明表示跟随鼠标指针。
如果我们希望元素可以被拖动，那么需要将其 draggable属性设为true (a标签draggable默认是true)
拖放的事件
在进行拖放操作的不同阶段会触发数种事件，拖拽事件的dataTransfer属性存放了拖放操作中的相关数据。
| dragstart | 作用于[源元素]，当一个元素开始被拖拽的时候触发，用户拖拽的元素需要附加dragstart事件。在这个事件中，监听器将设置与这次拖拽相关的信息，例如拖动的数据和图像。 |
| dragenter | 作用于[源元素]，当拖拽中的鼠标进入一个元素的时候触发。这个事件的监听器需要指明是否允许在这个区域释放鼠标。如果没有设置监听器，或者监听器没有进行操作，则默认不允许释放。 |
| dragover | 作用于[目标元素]，当拖拽中的鼠标移动经过一个元素的时候触发。 |
| dragleave | 作用于[目标元素]，当拖拽中的鼠标离开元素时触发。可以作为可释放反馈的高亮或插入标记去除。 |
| drag | 作用于[源元素]，事件在元素被拖动时触发。 |
| drop | 作用于[目标元素]，在拖拽操作结束释放时于释放元素上触发。 |
| dragend | 作用于[源元素]，拖拽源在拖拽操作结束时触发，不管操作成功与否。 |
(在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mousemove，是不会触发的）
DataTransfer 对象
在处理拖放操作时，我们需要用到 DataTransfer 对象来保存被拖动的数据。 DataTransfer 可以保存一项或多项数据、一种或者多种数据类型。
属性
| dropEffect | dropEffect [String]指定实际的放置效果，可能的值： copy: 复制到新的位置 move: 移动到新的位置 link: 建立一个源位置到新位置的链接 none: 禁止放置（禁止任何操作） |
| effectAllowed | [String]指定拖动时被允许的效果，可能的值： copy: 复制到新的位置. move:移动到新的位置 . link:建立一个源位置到新位置的链接. copyLink: 允许复制或者链接. copyMove: 允许复制或者移动. linkMove: 允许链接或者移动. all: 允许所有的操作. none: 禁止所有操作. uninitialized: 缺省值（默认值）, 相当于 all. |
| files | 包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。 |
| types | 保存一个被存储数据的类型列表作为第一项，顺序与被添加数据的顺序一致。如果没有添加数据将返回一个空列表。 |
方法
| void addElement(Element element) | 设置拖动源。通常不需要改变这项，如果修改这项将会影响拖动的哪个节点和dragend事件的触发。默认目标是被拖动的节点 |
| void clearData(String type) | 删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，将删除所有类型相关联的数据。如果不存在指定类型的数据，或数据传输不包含任何数据，此方法将没有任何效果。 |
| String getData(String type) | 获得给定类型的数据，如果给定类型的数据不存在或者数据转存没有包涵数据，方法将返回一个空字符串。 |
| void setData(String type,String data) | 为一个给定的类型设置数据。如果该数据类型不存在，它将添加到的末尾，这样类型列表中的最后一个项目将是新的格式。如果已经存在的数据类型，替换相同的位置的现有数据。就是，当更换相同类型的数据时，不会更改类型列表的顺序。 |
| void setDragImage(DOMElement image,long x,long y) | 自定义一个期望的拖动时的图片。大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。 image 要用作拖动反馈图像元素 x 图像内的水平偏移量. y 像内的垂直偏移量. |
浏览器支持
Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5+
演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag & Drop</title>
<style type="text/css">
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ccccff;
background-color: #ccccff;
text-align: center;
line-height: 100px;
} .bin {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #ccccff;
overflow: hidden;
float: left;
}
</style>
</head>
<body>
<div style="display: table;">
<div class="bin">
<div class="box" draggable="true">可拖拽元素</div>
</div> <div class="bin"> </div>
</div> <script type="text/javascript">
var bins = document.querySelectorAll('.bin');
var boxs = document.querySelectorAll('.box');
var drag = null; for (var i = 0; i < boxs.length; i++) { var box = boxs[i]; box.onselectstart = function() {
return false;
};
box.ondragstart = function(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', e.target.outerHTML);
e.dataTransfer.setDragImage(e.target, 0, 0);
drag = this;
return true;
};
box.ondragend = function(e) {
drag = null;
return false
};
} for (var i = 0; i < bins.length; i++) {
var bin = bins[i];
//当拖曳元素进入目标元素
bin.ondragover = function(e) {
e.preentDefault();
return true;
}; //拖拽元素在目标元素上移动
bin.ondragenter = function(e) {
this.style.backgroundColor = '#eeeeff';
return true;
};
//拖拽元素在目标元素上离开
bin.ondragleave = function(e) {
this.style.backgroundColor = '#fff';
return true;
}; //拖拽的元素在目标元素上同时鼠标放开
bin.ondrop = function(e) {
if (drag) {
drag.parentNode.removeChild(drag);
this.appendChild(drag);
}
this.style.backgroundColor = '#fff';
return false;
};
} document.body.ondrop = function(e) {
e.preventDefault();
e.stopPropagation();
} </script>
</body>
</html>
HTML5中的拖放的更多相关文章
- HTML5 中的拖放
今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...
- HTML5中的跨文档消息传递
跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5中引入的关键特性
新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...
- HTML5新增的拖放API---（一）
HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- html5中canvas的使用 获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
随机推荐
- Zeppelin原理简介
Zeppelin是一个基于Web的notebook,提供交互数据分析和可视化.后台支持接入多种数据处理引擎,如spark,hive等.支持多种语言: Scala(Apache Spark).Pytho ...
- Thinkphp错误-phpMyAdmin 尝试连接到 MySQL 服务器，但服务器拒绝连
phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 原因有可能是因为修改了m ...
- [Firebase] 4. Firebase Object related Database
The idea: This post we are going to learn how to build a Firebase Forage with object related databas ...
- angularjs中的$state.go
路由是这么定义的: $stateProvider .state('page1', { url: '/page1', templateUrl: 'views/page1.htm', controller ...
- linux sort 、uniq 命令
以文件的每行为单位,从左往右依次按ascii码进行比较 sort sort.txt #默认为升序 -u:去除重复行 sort -u sort.txt -r:降序排列 sort -r sort.txt ...
- SCF: 简单配置门面
SCF: 简单配置门面 [English] [中文] Simple Configuration Facade, 简写为 SCF.是 代码 和 外部配置 (properties文件, 环境变量,系统/ ...
- LaTeX去掉默认显示日期时间
LaTeX去掉默认显示日期时间: \date{}
- JAVA编译器常量
编译器常量的特点就是:它的值在编译期就可以确定.比如: final int i = 5; 再傻的编译器也能在编译时看出它的值是5,不需要到运行时.对于运行时常量,它的值虽然在运行时初始化后不再发生变化 ...
- C#解析XML文件
想实现:C#读取XML文件内的内容至List XML文件:AppAttr.xml 其中,一定是要ArrayOfAppAttr(红色部分AppAttr为你的实体类名) <?xml version ...
- AndroidStudio项目提交（更新）到github最具体步骤
在使用studio开发的项目过程中有时候我们想将项目公布到github上.曾经都是用一种比較麻烦的方式(cmd)进行提交.近期发现studio事实上是自带这样的功能的,最终能够摆脱命令行了. 由于自己 ...