关于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. 【转】vim折叠功能

    原文:https://www.yupengsir.com/topic/content?i=140 这个作者的vim系列是高级的用法, 要学习一下. https://blog.easwy.com/arc ...

  2. html5-video视频播放

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  3. 【SSH三大框架】Hibernate基础第五篇：利用Hibernate完毕简单的CRUD操作

    这里利用Hibernate操作数据库完毕简单的CRUD操作. 首先,我们须要先写一个javabean: package cn.itcast.domain; import java.util.Date; ...

  4. 使用Loader实时查询本地数据库用法

    在看Android的文档时,看到了这么一个东西: Loader 究竟是什么东西呢? Introduced in Android 3.0, loaders make it easy to asynchr ...

  5. java中循环控制结构

    1. break结束break所在循环 for(i……) { for(j……) { break;  //结束循环j } } 2.带标签的break. java中的标签只用在循环语句前面. outer: ...

  6. PHP 5 Math函数

    PHP 5 Math 函数 PHP Math 简介 Math 函数能处理 integer 和 float 范围内的值. 安装 PHP Math 函数是 PHP 核心的组成部分.无需安装即可使用这些函数 ...

  7. 使用SimHash进行海量文本去重

    阅读目录 1. SimHash与传统hash函数的区别 2. SimHash算法思想 3. SimHash流程实现 4. SimHash签名距离计算 5. SimHash存储和索引 6. SimHas ...

  8. js与jQuery实现方式对比汇总

      CreateTime--2016年12月16日09:11:23Author:Marydonjs与jQuery实现方式对比汇总 <div id="ListContainer" ...

  9. 编程算法 - 翻转单词顺序 代码(C)

    翻转单词顺序 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个英文句子, 翻转句子中单词的顺序, 但单词内字符的顺序不变. 首先翻转(r ...

  10. Centos网络时好时超时问题解决

    近期公司使用的Centos突然出现网络不稳定现象,有公网,内部可以PING通外网,但是外部PING这个IP时,经常丢包现象,而且一丢包就是连续性的长达七八次,甚至十几次. 这个问题折腾了很长时间,因为 ...