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;
}

effectAllowed和dropEffect

这两个属性用于描述在拖拽过程中，鼠标显示的样式，受浏览器和操作系统的影响，鼠标显示的图标并不一致。

effectAllowed表示此次拖拽允许显示的鼠标样式，可以是以下值：none、copy、copyLink、copyMove、link、linkMove、move、all和uninitialized。只能在dragstart事件中更改此值。

dropEffect表示此次拖拽过程中显示的样式，可以是以下几个值：copy、move、link和none。在具体的拖拽过程中，还受effectAllowed值限定，具体限定内容见下表，当dropEffect的值被设置为一个不属于effectAllowed限定的值时，整个事件链将被中止，即后续事件都将不会被触发，但不会发生任何错误提示。

setDragImage(image, x, y)

这个函数用于设置鼠标移动过程中随鼠标一起移动的效果图，而不是鼠标指针的显示效果。x、y参数用于指定图像相对于鼠标指针的位置；image参数用于指定图像元素，若是一个img元素，则显示图像元素，否则将给定的元素转换成一张图像并显示。

该函数只能在读写模式(也就是dragstart事件)下有用，在其它事件中调用无效。若不调用此函数，则在拖拽时，被拖拽元素被转换成一个图处并当作一个效果图显示。

items属性

对items的接口定义如下：

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.items就是DataTransferItem的一个数组。DataTransferItemList仅仅是定义一套以数组形式存取DataTransferItem对象的接口。我们主要看一下DataTransferItem类的定义：

• kind:表示数据的类型，只能是string或File。单从字面就很好理解这两个值代表的是什么意思。
• type:实际数据的类型或是格式，一般用mimetype表示，但并不是强制mimetype格式。
• getAsString(callback):当kind属性为string时，在只读或是读写模式下，可以通过回调函数处理此对象关联的实际数据。
• getAsFile():当kind为file是，通过此函数能获取真实的数据，否则返回null，只在只读或是读写模式下有效。

在非读写模式下删除DataTransferItemList中的数据，会返回InvalidStateError错误。若是在非读写模式下添加数据，则不执行任何操作。DataTransfer.setData则是对这两个函数的封装(根据第二个参数决定是删除还是添加)。

types属性

返回根据下列步骤产生的字符串集合(DOMStringList)：

1. 产生一个空的DOMStringList对象L。
2. 遍历DataTransfer.items对象。
3. 若DataTransfer.items的子项的kind的值为string，则将该项的type值添加到L对象中。
4. 若DataTransfer.items的子项的kind的值为file，则向L对象添加"Files"字符串。
5. 返回L对象

getData(format)

getData是从DataTransfer.items中查找数据。返回符合以下条件的数据：

1. DataTransferItem.kind为string
2. DataTransferItem.type的值等于format参数

如果没有找到匹配的或是处于保护模式下，则返回一个空字符串。

参数format在传递到函数内部之前，都会被转换成小写字符，且如果参数值为text或是url，则会被转换成text/plain和text/uri-list。

setData(format, data)

setData用于向DataTransfer.items中添加或删除一条数据：

当没有指定第二个参数data时，则是从DataTransfer.items中删除符合以下条件的数据：

1. kind等于string
2. type等于参数format

当指定第二个参数data时，则是向DataTransfer.items中添加数据，新添加的数据格式如下：

1. kind的值为string
2. type的值为format
3. data参数作为DataTransferItem的实际值。

参数format在传递到函数内部之前，都会被转换成小写字符，且如果参数值为text或是url，则会被转换成text/plain和text/uri-list。

如果不处于读写模式下，则不做任何操作。

clearData()

清除所有kind值为string的项。只在读写模式下起作用。

存储模式

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

来自：http://blog.830725.com/post/html5-drag-and-drop-intro.html