关于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">&nbsp;</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中的拖放的更多相关文章

  1. HTML5 中的拖放

    今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...

  2. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

  3. HTML5学习笔记 拖放

    拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...

  4. HTML5中引入的关键特性

    新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...

  5. HTML5新增的拖放API---（一）

    HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面. 拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有 ...

  6. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  7. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  8. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  9. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

随机推荐

  1. 学生表 课程表 成绩表 教师表 50个常用sql语句

    原文:http://www.cnblogs.com/zengxiangzhan/archive/2009/09/23/1572276.html Student(S#,Sname,Sage,Ssex) ...

  2. [Node.js] Level 5. Express

    Express Routes Let's create an express route that accepts GET requests on'/tweets' and responds by s ...

  3. mvc:annotation-driven注解的作用

    <mvc:annotation-driven>会自动注册RequestMappingHandlerMapping与RequestMappingHandlerAdapter两个Bean,这是 ...

  4. php的opcache缓存扩展(php页面代码刷新速度)

    opcache (全程 zend opcache): 从php5.5开始,默认提供的php脚本缓存扩展,编译php5.5时加上参数--enable-opcache就可以编译opcache了,只是要启用 ...

  5. css换行缩进

    1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> ...

  6. honeyd蜜罐配置和web监听脚本

    Honeyd的安装和配置 Honeyd软件依赖于下面几个库及arpd工具: (1)Libevent:是一个非同步事件通知的函数库. 通过使用 libevent,开发者能够设定某些事件发生时所运行的函数 ...

  7. 01-maven环境配置

    一,下载maven.进入官网,点击downland,选择相应的版本下载. 2, 二,解压到相应目录下. 例如下载如下: 解压到该路径: 三,配置环境变量,新建一个maven_Home的变量,值为有bi ...

  8. Kubuntu 初始配置

    1.中文配置 系统设置中地区选择中国.语系使用简体中文(一開始可能仅仅有英文选项,似乎是更新后能够选择其它语言了) 安装中文字体: sudo apt-get install ttf-wqy-micro ...

  9. 编码gbk ajax的提交

    客户端

  10. atitit.资源释放机制--attilax总结

    atitit.资源释放机制--attilax总结 1. .全手工, 1 2. 引用计数, 1 2.1. 成本也显而易见. 1 2.2. 循环引用的问题, 2 2.3. 引用计数方式事实上也有经典的卡顿 ...