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表示不可用。

HTML5拖拽

原文：http://www.cnblogs.com/muyan927/p/5677641.html