HTML5 的拖拽介绍

本文主要介绍与拖拽操作相关的对象及事件信息，但并不涉及太多的源码演示。

一个简单的示例

在html5中要实现拖放操作，相对于以前通过鼠标操作实现，要简单得多，数据安全性也更有保障。只需要以下几步即可。

1. 给被拖拽元素添加draggable属性，如果是文件拖放。
2. 为目标元素添加一个dropzone属性，这一步也不是必须的，可以省略。
3. 在拖拽元素的dragstart中初始化相关的数据信息，主要是DataTransfer对象。
4. 在目标元素的dragover事件中，取消其默认操作。
5. 在目标元素的drop事件中，处理接受到的数据。
6. 在被拖拽元素的dragend事件中，做善后工作。若没有则可以省略。

大致代码如下：

    <div id="source" draggable="draggable">source</div>      <div id="target">target</div>      <script type="text/javascript">      var target = document.getElementById('target');      var source = document.getElementById('source');      source.ondragstart = function(e){        e.dataTransfer.effectAllowed = 'copyMove';        e.dataTransfer.setData('test', 'testData');      };      target.ondragover = function(e){        e.dataTransfer.dropEffect = 'move';        e.preventDefault(); // 不能少      };      target.ondrop = function(e){        var elem = document.createElement('a');        elem.innerHTML = e.dataTransfer.getData('test');        e.target.appendChild(elem);      };      </script>

draggable属性

draggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值：

1. true：表示此元素可拖拽。
2. false：表示此元素不可拖拽。
3. auto：除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽。
4. 其它任何值：表示不可拖拽。

dropzone属性

这个属性用于接受拖拽元素的目标元素上，表示能接受的数据类型及操作方式。多个值用空格分开，不区分大小写。其值有以下类型组成：

• copy:表示将允许的元素放到该元素上时，会将拖拽数据复制到目标元素上。
• link:表示将允许的元素放到该元素上时，将链接数据到目标元素上。
• move:表示将允许的元素放到该元素上时，会将数据移动到目标元素上。
• 以string:开头的字符串，长度不能小于8个字符:表示能接受DataTransferItem.kind值为string的data对象。
• 以file:开头的字符串，长度不能小于6个字符:表示能接受DataTransferItem.kind值为file且DataTransferItem.type的值匹配file:之后的字符的DataTransferItem的对象。

相关的事件

DragEvent接口定义

DragEvent从MouseEvent接口继承，其定义如下，与MouseEvent相比，只是多了个DataTransfer对象。所有针对拖拽的操作也是通过控制此对象来完成的。

    [Construct(DOMString type, optional DragEventInit eventInitDict)]      interface DragEvent : MouseEvent      {        readonly attribute DataTransfer? dataTransfer;      };      /* 这是用于初始事件的参数定义 */      dictionary DragEventInit : EventInit      {        // 从UIEvent继承的属性:        Window? view = null;        long detail = 0;        // 从MouseEvent继承的属性:        long screenX = 0;        long screenY = 0;        long clientX = 0;        long clientY = 0;        boolean ctrlKey = false;        boolean shiftKey = false;        boolean altKey = false;        boolean metaKey = false;        unsigned short button = 0;        unsigned short buttons = 0;        EventTarget? relatedTarget = null;        // DragEvent添加的新属性:        DataTransfer? dataTransfer;      }

事件描述

目标元素是指当前鼠停留的元素，如要将A元素拖放到F元素上，中间经过的所有元素，在鼠标经过期间都是一个目标素，相应的事件都会被触发，A元素本身就是第一个目标元素。

DataTransfer接口

在HTML5中，为了实现在拖放过程中的数据交换，给所有的拖拽事件提供了一个DataTransfer属性。通过此对象的方法和属性来完善拖放功能。

    interface DataTransfer      {        attribute DOMString dropEffect;        attribute DOMString effectAllowed;        void setDragImage(Element image, long x, long y);        readonly attribute DOMString[] types;        DOMString getData(DOMString format);        void setData(DOMString format, DOMString data);        void clearData(optional DOMString format);        readonly attribute DataTransferItemList items;        readonly attribute FileList files;      }

    interface DataTransferItemList      {        readonly attribute unsigned long length;        getter DataTransferItem(unsigned long index); // items[index]        deleter void(unsigned long index); // delete items[index]        void clear();        DataTransferItem? add(DOMString data, DOMString type);        DataTransferItem? add(File data);      }      interface DataTransferItem      {        readonly attribute DOMString kind;        readonly attribute DOMString type;        void getAsString(FunctionStringCallback? _callback);        File? getAsFile();      }      [Callback, NoInterfaceObject]      interface FunctionStringCallback      {        void handleEvent(DOMString data);      }

存储模式

存储模式决定了DataTransfer各项内容是否可用。下表列出相关的信息，其中Y表示可用，N表示不可用。