drag and drop

---

一.被拖动的元素

1. 如何使一个元素变得可拖动

一些标签默认能够拖动，如 "img", "a" 标签,要使任何元素都可拖动(draggable),HTML5元素有个新特性叫draggable，支持IE9+:

// draggable 有3个值true, false, inherit


// 使默认可拖动元素变得不可拖动
google

对于IE8-可以在mousedown的时候对目标元素添加一个dragdrop()方法(以下代码仅针对IE8-)：

// IE8-以下要考虑到兼容性问题
var box = document.getElementById("box");
box.attachEvent("onmousedown", function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    target.dragdrop();
})

2.被拖动元素拖动事件

1. dragstart 按下鼠标准备拖动时触发，可以用于setData()，effectAllowed
2. drag 拖动过程中触发
3. dragend 松开鼠标的一瞬间触发

---

二.可放置元素(droppable)

1.元素拖到可防止区域发生的事件

1. dragenter 进入元素边界时触发 (可设置dropeffect)
2. dragover 在元素内移动时持续促发
3. dragleave (放置不成功时触发)或者 drop (放置成功时触发， 可用于getData())

2.如何使一个元素变为可放置区域

只需要重写dragenter,dragover默认行为，Firefox要将drop默认行为也重写，为保持兼容性问题，将3个默认行为都改写：

// div样式设置省略


var dropTarget = document.getElementById("dropTarget");
dropTarget.addEventListener("dragenter", function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener("dragover", function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener("drop", function(e) {
    e.preventDefault();
}, false);

---

三.dataTransfer对象

仅仅使元素变得可拖动，可放置没有作用，在拖动和放置的时候要进行数据交换才有用。
dataTransfer是event的一个属性，只有drag-and-drop事件触发时才存在

1.主要的两个方法setData()和getData()

setData(): 
1. @param1 数据类型 "text" 或者 "url", HTML5新增MIME类型，这两个类型对应MIME类型为
"text/plain"和"text/uri-list"
2. @param2 字符串内容
3. 应该在 dragstart事件 中设置该属性

getData() 
1. @param 接受数据类型 "Text"(T大写为了保证兼容firefox) 或者 "url"
2. 应当在 drop事件 中获取数据，从而拖动目标与放置目标进行数据交换

eg:
event.dataTransfer.setData("text", "some text");
event.dataTransfer.setData("url", "http://www.google.com");

var url = event.dataTransfer.getData("url") ||  
          event.dataTransfer.getData("text/uri-list");
var text = event.dataTransfer.getData("Text");

2.dropEffect和effectAllowed

表示拖动效果，以及鼠标样式

1. dropEffect 设置在 "dragenter" 事件发生时，none, move, copy, link 4种效果
2. effectAllowed 设置在 "dragstart" 事件发生时， none, move, copy...多种样式

3.其他一些属性

setDragImage(element, x, y) 
允许在拖动时光标下指定图片显示，3个参数
     @params1 一个html元素
     @params2 @params3 图片坐标
     不支持IE, 在"dragstart"事件时设置

---

四.具体示例

---

五.小结

1. 主要考虑如何让元素如何变得可拖动
2. 如何让元素变为可放置
3. 元素在拖动与放置的时候进行数据交换