生长
原生拖放的生长大抵可分为三个阶段：IE4、IE5+、HTML5。
IE4 是最早在网页中引入 JavaScript 拖放功用的，当时只要图象和选中的文本可以拖放，而且只要文本框是有用的安排目的。
IE5 拖放功用进一步得到了扩大，增加了新的事宜，险些网页中的任何元素都可以作为安排目的。
IE5.5+ 又更进一步，让网页中的任何元素都可以拖放。
HTML5 在 IE 的实例基础上，进一步制订了拖放的范例。
Firefox 3.5+、Safari 3+、Chrome、Opera 12+也依据 HTML5 范例完成了原生拖放功用。
拖放事宜
在举行拖放操纵的差别阶段会触发数种事宜。注重，在拖拽的时刻只会触发拖拽的相干事宜，鼠标事宜，比方 mousemove，是不会触发的。当从操纵系统拖拽文件到浏览器的时刻，dragstart 和 dragend 事宜不会触发。
拖动某元素时，顺次触发以下事宜
dragstart
当一个元素被拖拽的时刻触发。
drag
触发 dragstart 后，随即会触发 drag 事宜，而且在元素被拖动时期会延续触发该事宜。
dragend
拖动住手时触发。（不管元素是放到了有用的安排目的照样无效的安排目的上）
元素拖放到有用的安排目的上时，顺次触发以下事宜
dragenter
元素被拖放到安排目的上触发。
dragover
被拖动的元素在安排目的范围内挪动时，会延续触发该事宜。
dragleave
元素被拖出了安排目的，触发该事宜，而且 dragover 事宜不再发作。
drop
元素被放到了安排目的中，触发该事宜。
拖放步骤
定义拖拽目的
定义拖拽数据
（可选）设置拖动反应图片
设置拖动结果
定义安排目的
拖放后的逻辑处置惩罚
定义拖拽目的
默许情况下，图象、链接和已选中的文本是可以拖动的。文本须要被选中才拖动，而图象和链接在任何时刻都可以拖动。
让其他元素可拖动也是可以的。HTML5 为一切 HTML 元素划定了一个 draggable 属性，示意是不是可以拖动。图象和链接的 draggable 属性自动被设置成了 true，其他元素是 false。
// 设置图象不可拖动
<img src="http://www.seiue.com" draggable="false">
// 设置这个元素可以拖动
<div draggable="false">可拖动的DIV</div>支撑 draggable 属性的浏览器有 IE 10+、Firefox 4+、Safari 5+、Chrome 和 Opera 12+。
定义拖拽数据
我们有时会须要在拖放操纵时举行数据交换，IE 引入了 dataTransfer对象，它是事宜对象的一个属性，用于从被拖动元素向安排目的通报数据。由于它是事宜对象的属性，所以只能在拖放事宜中接见，不能零丁建立。现在，HTML5 范例也收入了 dataTransfer 对象。
完成数据交换重要用到两个要领：getData(type)和setData(type, data)。type示意保留的数据范例，取值为“text”或“URL”，getData() 经由过程 setData() 设置的 type 来取到保留的值。
function dragStart(e) {
// 设置文本数据
e.dataTransfer.setData('text', 'hello world');
// 设置URL
e.dataTransfer.setData('URL', 'www.seiue.com');
}
function drop(e) {
// 吸收文本数据
var text = e.dataTransfer.getData('text');
// 吸收URL
var url = e.dataTransfer.getData('URL');
}
drag.addEventListener('dragStart', dragEnter, false);
drop.addEventListener('drop', drop, false);发起老是增加 text/plain和text/uri-list来替换text和URL，由于后者存在兼容问题而且终究会被映照为前者。
设置拖动反应图片
当发作一次拖拽时（dragstart 事宜触发的元素），会在拖拽的元素处发生一个半透明的图片（该元素副本），而且会在拖拽过程当中追随鼠标挪动，这就是反应图片。这个图片是自动天生的，无需你亲身设定，但可以经由过程setDrawImage来自定义一个反应图片。
setDrawImage是 dataTransfer 对象的一个要领。
event.dataTransfer.setDrawImage(image, xOffset, yOffset)须要传入三个参数，分别是：一个图片的援用（可以是图片元素对象、canvas或其他元素对象），图象内的程度偏移量，图象内的垂直偏移量。下面的例子定义了一个反应图片。
function dragCustomImage(e) {
var img = document.createElement('img')
img.setAttribute('src', 'drag-img.jpeg')
e.dataTransfer.setDragImage(img, 150, 150)
}设置拖动结果
dataTransfer 对象不光可以传输数据，还能经由过程它来肯定被拖动元素以及防备目的元素可以吸收什么操纵。重要用到两个属性：dropEffect和effectAllowed。
dropEffect
可以晓得被拖动的元素可以实行哪一种安排操纵。这个属性有4个值。
none: 制止把拖放的元素放在这里。
move: 可以把拖放的元素挪动到安排目的。
copy: 可以把拖放的元素复制到安排目的。
link: 安排目的会翻开拖动的元素（拖动的元素必需是一个链接，有URL）。
把元素拖放到安排目的时，以上的每一个值都邑致使光标显现差别的标记。每种操纵触发什么样的行动须要你来自行完成，浏览器不会帮你挪动、复制和翻开链接。要运用 dropEffect，我们须要在 dragenter事宜处置惩罚顺序中设置它的属性。
effectAllowed
dropEffect 属性须要搭配 effectAllowed 属性才见效。effectAllowed 属性示意许可拖动元素的哪一种 dropEffect。effectAllowed 有以下值。
none: 被拖动的元素不能有任何行动。
copy: 只许可值为”copy“的 dropEffect。
link: 只许可值为“link” 的 dropEffect。
move: 只许可值为“move”的 dropEffect。
copyLink: 许可值为“copy”和“link”的 dropEffect。
copyMove: 许可值为“copy”和“move”的 dropEffect。
linkMove: 许可值为“link”和“move“的 dropEffect。
all: 许可恣意 dropEffect。
须要在dragstart事宜处置惩罚顺序中设置它的属性。
定义安排目的
一切元素都支撑安排目的事宜，但这些元素默许是不许可安排的。假如拖动的元素拖放到了不许可安排的元素，是不会触发drop 事宜的。
把元素变成有用的安排目的，须要重写dragenter和dragover事宜的默许行动。
var dropTarget = document.getElementById('dropTarget');
dropTarget.addEventListener('dragenter', function(e) {
e.preventDefault();
}, false);
dropTarget.addEventListener('dragover', function(e) {
e.preventDefault();
}, false);处置惩罚拖放后的做的事变
在drop事宜发作时做一些事变，你能够想要猎取拖拽目的照顾的数据并做某些响应的事变。
参考资料
JavaScript高等顺序设计（第3版）第16章 HTML5 剧本编程 – 原生拖放
