1.什么是拖放（Drag and drop）？
拖放（Drag and drop）是WEB软件应用中的常见操作html 拖放，即用户可以用鼠标单击一个对象并将其拖到另一个位置。
拖放是 HTML5 标准的一部分，任何标签元素也可以被拖动。
二、为什么需要拖？3． HTML5 拖放（Drag and drop）浏览器兼容性
Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 均支持拖动。注意：Safari 5.1.2 不支持拖动
HTML5拖拽示例一、实现标签元素拖拽的步骤
要实现元素的拖拽功能，需要提前设置多个参数，所以这里有一个步骤的概念，我们可以按照下面的步骤进行，不需要理解为什么这样是这样的，因为它是这样设计的：
1.设置元素可拖动
为了使元素可拖动，我们为其添加draggable属性并将draggable属性设置为true：
复制
2.设置要拖动的内容（ondragstart和setData()）
设置元素被拖动时html 拖放，拖动的内容是什么； 这里我们需要给要拖动的元素添加ondragstartstorm（当元素开始用键盘拖动时，就会执行这里设置的函数），然后我们需要在反弹中设置拖动的内容，如下代码：
function drag(ev) {
//设置被拖数据的数据类型和值
ev.dataTransfer.setData("img",ev.target.id); //数据类型可以是任意字符 "img"，值是可拖动元素的 id ("drag1")
}复制
3.设置被拖动元素可以放置的位置（ondragover）
默认情况下，我们很难将数据/元素放入其他元素中。 如果我们想把图片放到另一个div容器中，代码如下，需要设置这个div容器来放置其他元素（给它添加一个ondragover事件，ondragover规定当被拖动的元素经过它时，被拖动的元素可以被拖动的元素放在这里）：
function allowDrop(ev) {
ev.preventDefault(); //必须阻止对元素的默认处理方式，表示设置允许放置，默认行为是以链接形式打开
}复制
4.设置被拖动元素的新位置（ondrop）
当我们按住键盘的时候，就代表我们要放置拖拽的数据。 这时候就会发生drop事件。 我们需要指定拖动元素需要放置的新位置。 这里给div容器添加一个ondrop事件，如下：
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
}复制
2. 将图像拖入div容器中
#div1 { width:300px; height:120px;padding:10px; border:1px solid blue; font-size:12px; text-align: center; }
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
}
我是一个容器，请用鼠标拖动下面的图片移动到我上面
复制
三、二
在元素之间拖动图像
#div1, #div2 {float:left; width:198px; height:100px; margin:10px;padding:10px;border:1px solid blue; text-align: center;}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("img",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("img");
ev.target.appendChild(document.getElementById(data));
}
复制
