深入理解html5拖放

最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。拖放图像时，把鼠标放到图像上，按住鼠标不放就可以拖放它。拖放文本时，要先选中文本，然后可以像拖放图像一样拖放被选中的文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元素都可以作为放置目标。IE5.5更进一步让网页中的任何元素都可以拖放。HTML5以IE的实例为基础指定了拖放规范。

拖放事件

通过拖放事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定那里发生了拖放事件，有些事件是在被拖动的元素上触发的，而有些事件是在放置目标上触发的。拖动某些元素时，将一次触发下列事件：

1. dragstart
2. drag
3. dragend

按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号（圆环中有一条反斜线），表示不能把元素放到自己上面。拖动开始时，可以通过ondragstart事件处理程序来运行JavaScript代码。

触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续发送该事件。这个事件与mousemove事件相似，在鼠标移动过程中，mousemove事件也会持续发生。当拖动停止时（无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上），会触发dragend事件。

上述三个事件的目标都是被拖动的元素。默认情况下，浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随着光标移动。

当元素被拖放到一个有效的放置目标上时，下列事件会依次发生：

1. dragenter
2. dragover
3. dragleave或drop

只要元素被拖动到放置目标上，就会触发dragenter事件（类似于mouseover事件）。紧随其后的是dragover事件，而且被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出了放置目标，dragover事件不再发生，但会触发dragleave事件（类似于mouseout事件）。如果元素被放到了放置目标中，则会触发drop事件而不是dragleave事件。上述三个事件的目标都是作为放置目标的元素。

自定义放置目标

在拖动元素经过某些无效放置目标时，可以看到一种特殊的光标（圆环中有一条反斜线），表示不能放置。虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生drop事件。不过，你可以把任何元素变成有效的放置目标，方法是重写dragenter和dragover事件的默认行为。例如，假设有一个ID为“droptarget”的<div>元素，可以用如下代码将它变成一个放置目标。

var EventUtil = {    addHandler: function (element, type, handler) {        if (element.addEventListener) {            element.addEventListener(type, handler, false);        } else if (element.attachEvent) {            element.attachEvent("on" + type, handler);        } else {            element["on" + type] = handler;        }    },    preventDefault: function (event) {        if (event.preventDefault) {            event.preventDefault();        } else {            event.returnValue = false;        }    }};var droptarget = document.getElementById("droptarget");EventUtil.addHandler(droptarget, "dragover", function (event) {    EventUtil.preventDefault(event);});EventUtil.addHandler(droptarget, "dragenter", function (event) {    EventUtil.preventDefault(event);});

以上代码执行后，你就会发现拖动着元素移动到放置目标上时，光标变成了允许放置的符号。当然，释放鼠标也会触发drop事件。

在Firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的URL。换句话说，如果是把图像拖放到放置目标上，页面就会转向图像文件：而如果是把文本拖放到放置目标上，则会导致无效URL错误。因此，为了让Firefox支持正常的拖放，还要取消drop事件的默认行为，阻止它打开URL：

EventUtil.addHandler(droptarget, "drop", function (event) {    EventUtil.preventDefault(event);});

dataTransfer对象

只有简单的拖放而没有数据变化是没有什么用的。为了在拖放操作时实现数据交换，IE 5引入了dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来 完善拖放功能。目前，HTML5规范草案也收入了dataTransfer对象。

dataTransfer对象有两个主要方法： getData()和setData()。不难想象，getData()可以取得由setData()保存的值。setData()方法的第一个参数，也是getDAta()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为”text”或“URL”，如下所示：

//设置和接收文本数据event.dataTransfer.setDAta("text", "some text");var text = event.dataTransfer.getData("text");//设置和接收URLevent.dataTransfer.setData("URL", "HTML://www.w3cmm.com/");

IE只定义了“text”和“URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持“text”和“URL”，但这两种类型会被映射为“text/plain”和“text/uri-list”。

实际上，dataTransfer对象可以为每种MIME类型都保存一个值。换句话说，同时在这个对象中保存了一段文本和一个URL不会有任何问题。不过，保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。如果在ondrop处理程序中没有读到数据，那就是dataTransfer对象已经被销毁，数据也丢失了。

在拖动文本框中的文本时，浏览器会调用setData()方法，将拖动的文本以“text”格式保存在dataTransfer对象中。类似地，在拖放链接或图像时，会调用setData()方法并保存URL。然后，在这些元素被拖放到放置目标时，就可以通过getData()读到这些数据。当然，作为开发人员，你也可以在dragstart事件处理程序中调用setData()，手工保存自己要传输的数据，以便将来使用。

将数据保存为文本和保存为URL是有区别的。如果将数据保存为文本格式，那么数据不会得到任何特殊处理。而如果将数据保存为URL，浏览器会将其当成网页中的链接。换句话说，如果你把它放置到另一个浏览器窗口中，浏览器就会打开该URL。

Firefox在其第5个版本之前不能正确地将“URL”和“text”映射为“text/uri-list”和“text/plain”。但是却能把“Text”映射为“text/plain”。为了更好地在跨浏览器的情况下从dataTransfer对象取得数据，最好在取得URL数据时检测两个值，而在取得文本数据时使用“text”。

var dataTransfer = event.dataTransfer;//读取URLvar url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");//读取文本var text = dataTransfer.getData("Text");

注意，一定要把短数据类型放在前面，因为IE 10及之前的版本仍然不支持扩展的MIME类型名，而它们在遇到无法识别的数据类型时，会抛出错误。

dropEffect与effectAllowed

利用dataTransfer对象，可不光是能够传输数据，还能通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed。

其中，通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。

• “none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
• “move”：应该把拖动的元素移动到放置目标。
• “copy”：应该把拖动的元素复制到放置目标。
• “link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。

在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号。然而，要怎样实现光标所指示的动作完全取决于你。换句话说，如果你不介入，没有什么会自动地移动、复制，也不会打开链接。总之，浏览器只能帮你改变光标的样式，而其它的都要靠你自己来实现。要使用dropEfect属性，必须在ondraggenter事件处理程序中针对放置目标来设置它。

dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。

• “uninitialized”：没有该被拖动元素放置行为。
• “none”：被拖动的元素不能有任何行为。
• “copy”：只允许值为“copy”的dropEffect。
• “link”：只允许值为“link”的dropEffect。
• “move”:只允许值为“move”的dropEffect。
• “copyLink”：允许值为“copy”和“link”的dropEffect。
• “copyMove”：允许值为“copy”和”link”的dropEffect。
• “linkMove”：允许职位“link”和”move”的dropEffect。
• “all”：允许任意dropEffect。

必须在ondraggstart事件处理程序中设置effectAllowed属性。

假设你想允许用户把文本框中的文本拖放到一个<div>元素中。首先，必须将dropEffect和effectAllowed设置为”move”。但是，由于<div>元素的放置事件的默认行为是什么也不做，所以文本不可能自动移动。重写这个默认行为，就能从文本框中移走文本。然后你就可以自己编写代码将文本插入到<div>中，这样整个拖放操作就完成了。如果将dropEffect和effectAllowed的值设置为”copy”，那就不会自动移走文本框中的文本。

下面是一个综合实例：

<a href="http://www.w3cmm.com">拖动到红色区块打开链接</a><div style="width: 100px; height: 100px; float: right; background: red"id="droptarget"></div><div id="output"></div><script type="text/javascript">    var EventUtil = {        addHandler: function (element, type, handler) {            if (element.addEventListener) {                element.addEventListener(type, handler, false);            } else if (element.attachEvent) {                element.attachEvent("on" + type, handler);            } else {                element["on" + type] = handler;            }        },        preventDefault: function (event) {            if (event.preventDefault) {                event.preventDefault();            } else {                event.returnValue = false;            }        },    };    var droptarget = document.getElementById("droptarget");    var link = document.links[0];    function handleEvent(event) {        document.getElementById("output").innerHTML += event.type + "<br>";        switch (event.type) {        case "dragstart":        case "draggesture":            event.dataTransfer.dropEffect = "link";            break;        case "dropenter":        case "dragover":            EventUtil.preventDefault(event);            event.dataTransfer.effectAllowed = "all";            break;        case "drop":        case "dragdrop":            droptarget.innerHTML = event.dataTransfer.getData("url") || event.dataTransfer.getData("text/uri-list");        }    }    EventUtil.addHandler(droptarget, "dragenter", handleEvent);    EventUtil.addHandler(droptarget, "dragover", handleEvent);    EventUtil.addHandler(droptarget, "dragleave", handleEvent);    EventUtil.addHandler(droptarget, "drop", handleEvent);    EventUtil.addHandler(link, "dragstart", handleEvent);</script>

可拖动

默认情况下，图像、链接和文本是可以拖动的，也就是说，不用额外编写代码，用户就可以拖动它们。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。

让其它元素可以拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable属性自动被设置成了true，而其它元素这个属性的默认值都是false。要想让其它元素可拖动，或者让图像或链接不能拖动，都可以设置这个属性。例如：

<!-- 让这个图像不可以拖动 --><img src="smile.gif" draggable="false" alt+"Smiley face"><!-- 让这个元素可以拖动 --><div draggable="true">...</div>

支持draggable属性的浏览器有IE10+、Firefox 4+、Safari 5+和Chrome。Opera 11.5以及之前的版本都不支持HTML5的拖放功能。另外，为了让Firefox 支持可拖动属性，还必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存了一些信息。

其它成员

HTML5规范规定dataTransfer对象还应该包含下列方法和属性。

• addElement(element)：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而影响回调的对象），不会影响拖动操作时页面元素的外观。在写作文本时，只有Firefox 3.5+实现了这个方法。
• clearData(format)：清除以特定格式保存的数据。实现这个方法的浏览器有IE、Firefox 3.5、Chrome和Safari 4+。
• setDragImage(element, x, y)：指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme。
• types：当前保存的数据类型。这是一个类似数组的集合，以“text”这样的字符串形式保存着数据类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。