原生拖放
拖放是一种很常见的功能，现在这个功能已经成为Html5标准的一部分。通过html5只需要简单几行代码即可实现拖放，比如下面这个例子，你可以将此图片上下拖放。
示例代码
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="/img/ad_ourjs.jpg" draggable="true" ondragstart="drag(event)">
</div>
代码步骤
第一步： 要让一个元素可拖放
需要设置 draggable 属性
<img draggable="true">
第二步： 拖放什么
在 ondragstart 事件中通过 dataTransfer.setData 设置拖放的元素
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}在这种情况下，是通过传递被拖放对象的ID来操作的，所以类型是"text"
第三步: 拖放到什么地方
通过 ondragover实现， 通常情况下，元素可能会被拖放到其它地方，当一个容器允许放置时，只需要在ondragover事件中 preventDefault 即可
function allowDrop(ev) {
ev.preventDefault();
}第四步： 放置
在drop事件中将对象"转移"到容器中
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}这里通过appendChild实现转移拖放对象，同理可通过放置在不同位置实现排序。
相关事件
在拖放对象上触发的事件
ondragstart - 当用户开始拖放时
ondrag - 当用户正在拖放时
ondragend - 当用户拖放结束时
在放置对象（容器）上触发的事件
ondragenter - 当拖放对象进入容器时（首次）
ondragover - 当拖放对象经过容器时
ondragleave - 当拖放对象离开窗口时
ondrop - 当拖放对象释放到容器中时
DataTransfer
标准属性
DataTransfer.dropEffect 拖放的操作类型： copy、move、link 或 none （复制、移动创建链接等）
DataTransfer.effectAllowed 播放允许的类型： 比如有些容器只能复制，有些只允许移动等
DataTransfer.files 存放一些拖放的本地文件，如果没有拖放文件，则此列表为空
DataTransfer.items 只读 DataTransferItemList 对象
DataTransfer.types 只读 dragstart事件中指定的拖放类型
标准方法
DataTransfer.clearData() 清除指定类型的拖放数据
DataTransfer.getData() 获取指定类型的数据
DataTransfer.setData() 设置指定类型的数据
DataTransfer.setDragImage() 设置拖放时的自定义图标
支持： IE9及以上
参考：
2