HTML5学习日记——拖(Drag)&放(Drop)

浏览器支持
IE 9、Firefox、Opera 12、Chrome、Safari 5

---

拖（Drag） 放（ drop）是 HTML5 的新特性。
直观来说，就是一个对象承担拖这一动作，一个对象承担放这一动作。

创建两个元素来进行测试，以两个div为例，注意拖拽对象需设置 draggable 属性。链接和图片默认是可拖动的，不需要设置 draggable 属性。

<div id="boxDrop" ></div>  //用于放置，相当于容器
<div id="boxDrag" draggable="true"></div>  //用于拖动

设置样式用于展示

拖拽元素

在被拖拽的元素上触发的事件 :

• ondragstart    用户开始拖动元素时触发
• ondrag            元素正在拖动时触发
• ondragend     用户完成元素拖动后触发

简单体会一下事件触发的过程

var boxDrag,boxDrop;
window.onload = function () {
    boxDrag = document.getElementById("boxDrag");
    boxDrop = document.getElementById("boxDrop");
    msgDiv = document.getElementById("msg");

    boxDrag.ondragstart = function (e) {
        msgDiv.innerHTML = "开始拖动啦！";
    }
    boxDrag.ondrag = function (e) {
        var str = msgDiv.innerHTML;
        str = str +"<br/>"+ "拖动进行中~";
        msgDiv.innerHTML = str;
    }
   boxDrag.ondragend = function (e) {
       var str = msgDiv.innerHTML;
       str = str +"<br/>"+ "拖动结束啦！";
       msgDiv.innerHTML = str;
   }

总之就是，开始，拖———-，结束。

下面，打印任一事件的具体内容：

标注出来的 dataTransfer 是拖拽数据传递对象，用来保存被拖动的数据。具体再打印一下dataTransfer的内容（当然最好直接查API）

标注出来了两个方法比较重要，也能直观的看出用途：设置数据和获取数据
在拖拽对象时设置元素进行存放。（在ondrag事件和ondragend事件中设置是不可以的）

boxDrag.ondragstart = function (e) {
        e.dataTransfer.setData("Text","boxDrag");   //若未事先获取元素 可利用事件的目标属性event.target.id
 }

setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是“text”或“URL”
*以上说法貌似是在IE中的定义，其他情况可以指定别的值。

放置元素

在容器元素上触发的事件 :

• ondragenter    当被拖拽的对象进入其容器范围内时触发此事件
• ondragover     当被拖拽的对象在容器范围内拖动时触发此事件
• ondragleave    当被拖拽的对象离开其容器范围内时触发此事件
• ondrop            在一个拖拽过程中，释放鼠标时触发此事件

具体的进入容器、离开容器过程不再测试。

preventDefault方法：用来阻止一些默认的元素处理方法。
在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。因为默认情况下，数据/元素不能放置在其他元素中。有时在ondrop事件中也需要进行默认事件阻止。

boxDrop.ondragover = function (e) {
       e.preventDefault();
}

最后用dataTransfer中的getData方法获取对象，进行append即可。

boxDrop.ondrop = function (e) {
      //e.preventDefault();
       var obj = document.getElementById(e.dataTransfer.getData("Text"));
       boxDrop.appendChild(obj);
   }

getData方法的参数与setData的第一个参数相同

---

本地资源问题
可以看到dataTransfer中还有一个files属性，当拖拽的对象是本地文件时，需要用到这一属性。
例如，随便将本地的一张图片拖至容器中，打印dataTransfer.files结果如下：

也就是通过dataTransfer.files[0]可以读取拖入的内容。
再利用FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL

---

如果使用jQuery UI，会方便很多。（jQuery UI的js文件，需在jQuery的js文件下方引入，因为执行顺序从上至下）然后只需引入拖、放方法即可。

$("#boxDrag").draggable();
$("#boxDrop").droppable();

而且被拖拽的对象可以被放置在容器的任意位置。HTML5若想放置在鼠标落下的位置，需加一步对css的设置（例如left和top的值）。

---

自己加油加油 笨鸟晚飞也要飞呀飞