前言
HTML5中对于拖拽有专门的支持
HTML拖拽
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />可被拖拽的元素要将他的draggable 属性设置为true，ondragstart是用来设置当拖拽开始的时候的响应方法；ondragend 设置当拖拽完成后的响应方法。
对于目标元素
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">当拖曳元素进入目标元素的时候触发ondragenter 事件，拖拽元素在目标元素上移动的时候触发ondragover 事件，被拖拽的元素在目标元素上同时鼠标放开触发ondrop 事件。
数据的传递是通过DataTransfer 对象来实现的，一遍写法是Event.dataTransfer。
js 中响应方法的一般写法
function allowDrop(ev)
{
ev.preventDefault();
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//dataTransfer.setData() 方法设置被拖数据的数据类型和值：
//在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild(document.getElementById(data));
}
//Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
//Event.effectAllowed 属性：就是拖拽的效果//还未验证过