13、HTML5 拖放与浏览器对象相关技术解析

HTML5 拖放与浏览器对象相关技术解析

1. HTML5 拖放功能

1.1 HTML5 拖放概述

HTML5 规范实现了原生的拖放功能，但目前 Opera 不支持，在 Firefox、Chrome、Safari 和 IE8 中实现可能会有些棘手，IE7 也不支持。而且当前 HTML5 拖放的实现不够健壮和一致，使用时需谨慎。与以往实现不同，HTML5 中可拖动的内容是可变的，能拖动文本、图像、文档节点、文件等多种对象。

1.2 使元素可拖动

要使元素可拖动，需将 draggable 属性设置为 true 。例如：

var item = document.getElementById("item");
item.setAttribute("draggable", "true");

不过，IE 可能无法识别状态变化，所以最好直接在对象上设置：

<div id="item" draggable="true">
</div>

在 Safari 中，还需要额外的 CSS 样式设置：

-khtml-user-drag: element;

-khtml-user-drag 的允许值如下：
|