js原生拖放

拖放事件

拖动元素时将依次触发下列事件：

1. dragstart：按下鼠标键开始移动时在被拖放的元素上触发
2. drag：在元素拖放期间会持续触发
3. dragend拖放停止时（无论是否在有效目标上）触发

上述之间是针对被拖放元素。当某个元素被拖放到一个有效防止目标上时，会依次触发下列事件：

1. dragenter：元素被拖动到放置目标上时触发
2. dragover：元素在放置目标内移动时持续触发
3. dragleave或drop：如果元素拖出放置目标则触发dragleave，如果元素放在放置目标中，则触发drop事件

自定义放置目标

把有些不能放置元素的目标变成可以放置目标，可以重写dragenter和dragover事件的默认行为

var dragtarget = document.getElementById("draptarget");//某个放置元素
addHandler(dragtarget, 'dragenter', function(event) {
        event.preventDefault();
})
addHandler(dragtarget, 'dragover', function(event) {
        event.preventDefault();
})

在Firefox3.5+中，放置事件的默认行为是打开放置目标的url，可以取消在Firefox上的默认drop事件：

addHandler(dragtarget, 'drop', function(event) {
        event.preventDefault();
})

dataTransfer对象

它是事件对象的一个属性用于从被拖放元素向放置目标传递字符串格式的数据。

它包含的方法有：
1. getData() :取到getdata()保存的值,只有一个参数，表示保存的数据类型，取值为‘text’或‘URL’。保存为‘url’数据，浏览器会将它当成网页中的链接
2. setData()：设置属性的值

//设置和接收文本数据
event.dataTransfer,setData("text","some text!");
var text = event.dataTransfer.getData("text");

//设置和接收URL
event.dataTransfer,setData("URL","some text!");
var url = event.dataTransfer.getData("URL");

ie只定义了这两种有效数据类型，而HTML5支持各种MIME类型，包括这两种类型，但这两种类型会被映射为 “text/plain” 和“text/uri-list”。且Firefox5-版本不能映射，但可以用‘Text’映射为”text/plain”，所以获取数据可以这样写：

var dataTransfer = event.dataTransfer;

//读取URL
var url = dataTransfer.getData("url") ||dataTransfer.getData("text/uri-list");

//读取文本
var text = dataTransfer.getData("Text");

保存在dataTransfer 中的数据只能在drop事件中读取，拖动元素时会触发setData()。

它包含的属性有：

1. dropEffect：被拖动元素的放置行为。搭配effectAllowed才有用，必须在ondragenter事件中设置。有下列4个值
   
   • “none”：不能把拖动的元素放这里。这是出文本之外所有元素的默认值。
   • “move”：移动到放置目标
   • “copy”：复制到放置目标
   • “link”：打开拖动元素（但拖动元素必须是链接，有url）
2. effectAllowed：允许拖动元素的设置dropEffect。必须在ondragstart事件中设置。可能的值有：
   
   • “uninitialized”：没有给被拖动元素任何放置行为。
   • “none”：被拖动元素不能有任何行为。
   • “copy”：只允许‘copy’的dropEffect。
   • “link”：只允许“link”的dropEffect。
   • “move”：只允许“move”的dropEffect。
   • “copyLink”：允许‘copy’和“link”的dropEffect。
   • “copyMove”：允许‘copy’和“move”的dropEffect。
   • “linkMove”：允许“move”和“link”的dropEffect。
   • “all”：允许任意dropEffect。

一般只有文本、图像和链接是可以拖动的，文本在被选中的情况下可以拖动，图像和连接在任何情况下都可以拖动。让其他元素可以拖动可以用draggable设置为true，也可以通过设置来让图像不可拖动。
支持的浏览器有：ie10+、Firefox4+、Safari5+和chrome。而且如果Firefox要支持这个属性，还必须添加一个ondragstart事件以及在dataTransfer对象中保存一些信息。在ie9-，可以通过mousedown事件调用dragdrop()能让任何元素拖动。
该对象还包含其他属性：addElement(element)、clearData(format)、setDragImage(element, x, y)、types。

下面是一个例子

<img id="img" src="images/aaa.jpg" style = "width: 100px;height: 100px;">
<div id="tank" style = "height: 200px;border: 1px solid #9840f9;"></div>

var dragtarget = document.getElementById("tank");
var dragtarget2 = document.getElementById("img");
addHandler (dragtarget2, 'dragstart', function(event) {
    event.dataTransfer.effectAllowed = "move";  //设置为移动
    event.dataTransfer.setData("Text",event.target.id);   //设置数据
});
addHandler (dragtarget, 'dragenter', function(event) {
    event.preventDefault();          //设置为可放置
    event.dataTransfer.dropEffect = "copy";
});
addHandler (dragtarget, 'dragover', function(event) {
    event.preventDefault();         //设置为可放置
});
addHandler(dragtarget, 'drop', function(event) {
       event.preventDefault();             //取消火狐下默认打开元素链接
       var data = event.dataTransfer.getData("Text");      //获取数据
       event.target.appendChild(document.getElementById(data));   //放置元素
})

function addHandler (ele , type, fun) {
    if (ele.addEventLister) {
        return ele.addEventLister(type, fun, false);
    }
    else if (ele.attachEvent) {
        return ele.attachEvent('on'+type, fun);
    }
    else {
        return ele['on'+type] = fun;
    }
}

拖拽前效果如下：

拖拽后效果如下：