拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。过去，我们用监听鼠标的Mousedown、Mouseove、Mouseup等事件来不停地获取鼠标的坐标来修改元素的位置，而现在html5原生的Drag &Drop事件（DnD），方便了许多，而且性能也有了提高。
如何使对象能够被拖动
为了使元素能够被拖动 需把要拖动元素的draggable 属性设置为true。
<img src="../img/0.jpg" draggable="true" id="image"/>
注意：在大多数浏览器中，a元素和img元素默认就是可以拖放的，但是为了保险起见，最好还是加上draggable属性。
拖动时触发的事件
dragstart:网页元素开始拖动时触发
drag:被拖动的元素在拖动过程中持续触发
dragenter:被拖动的元素进入目标元素时触发。应该在目标元素监听此事件。
dragleave：别拖动的元素离开目标元素时触发，应该在目标元素中监听该方法。
dragover:被拖动的元素停留在目标元素中时持续触发，应该在目标元素中监听该方法。
drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend:网页元素拖动结束时触发。
注意：以上这些事件都可以指定回调函数。
dataTransfer 对象
拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性。它指向一个对象，包含了与拖动相关的各种信息。
event.dataTransfer.setData(biaozhi,event.target.id);
draggableElement.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Helloweba');
});
上面代码在拖动开始时，在dataTransfer对象上储存一条文本信息，内容为“Helloweba”。当拖放结束时，可以用getData方法取出这条信息。
dataTransfer对象的属性：
effectAllowed:指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files:包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types:储存在DataTransfer对象的数据的类型。
dataTransfer对象的方法：
setData(format, data):在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等
getData(format):从dataTransfer对象取出数据。
clearData(format):清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y):指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。
dataTransfer对象允许在其上存储数据，这使得在被拖动元素与目标元素之间传送信息成为可能。
实例代码 在两个div之间拖动元素
实现拖放的过程
1.设置元素可拖放，即把draggable属性设置为true
2.拖动什么 ondragstart 和 setData()
image.ondragstart = function(event) {
event.dataTransfer.setData(biaozhi,event.target.id);
}
image为可拖动的元素
3.放到何处-ondargover (ondragover事件规定在何处放置被拖动的数据。默认地无法将数据/元素放置到其他元素中。如果要允许放置，必须阻止默认的处理方式。这里通过调用ondragover事件的event.preventDefault()方法：)
box1Div.ondragover = function(event) {
event.preventDefault();
}
4.进行放置
当放置被拖拽数据时会发生drop事件，例：
function dropeImage(event) {
event.preventDefault();
//从dataTransfer中取出包装好的数据 放在目标元素中
var data = event.dataTransfer.getData(biaozhi);
event.target.appendChild(document.getElementById(data));
}
完整例子（元素在两个div之间进行拖放）
HTML 代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/drapAnddrop.js"></script>
<style type="text/css">
.box {
width: 400px;
height: 400px;
border: 1px solid orange;
}
#box1 {
background: darkgray;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box">
<img src="../img/0.jpg" draggable="true" id="image"/>
</div> </body>
</html>
Js代码
var box1Div;
var box2Div ,image;
var biaozhi = "text";
window.onload = function() {
box1Div = document.getElementById("box1");
box2Div = document.getElementById("box2");
image = document.getElementById("image");
//设置数据格式，就是包装要传递的数据在dataTransfer中
image.ondragstart = function(event) {
event.dataTransfer.setData(biaozhi,event.target.id);
} //放置结束
box1Div.ondragover = function(event) {
event.preventDefault();
}
box2Div.ondragover = function (event) {
event.preventDefault();
}
//进行放置
box1Div.ondrop = dropeImage;
box2Div.ondrop = dropeImage; }
function dropeImage(event) {
event.preventDefault();
//从dataTransfer中取出包装好的数据 放在目标元素中
var data = event.dataTransfer.getData(biaozhi);
event.target.appendChild(document.getElementById(data));
}
下面一段代码 是拖放本地文件进入网页中(本例子是拖放桌面上的一张图片进入网页元素)
HTML 代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#imageContainer {
width: 500px;
height: 500px;
background: darkgray;
}
</style>
<script src="../js/locationDrap.js"></script>
</head>
<body>
<div id="imageContainer"></div>
<div id="msgId"> </div>
</body>
</html>
Js 代码
var imageContainer;
window.onload = function () {
imageContainer = document.getElementById("imageContainer"); imageContainer.ondragover = function(event) {
event.preventDefault();
} imageContainer.ondrop = function(event) {
event.preventDefault();
// shouObj(event.dataTransfer.files);
var f = event.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function(event) {
// shouObj(event.target);
imageContainer.innerHTML = "<img src=\"" + fileReader.result +"\" />"
}
fileReader.readAsDataURL(f);
}
} function shouObj(obj) {
var s = "";
for (var k in obj) {
s += k + ":" + obj[k] + "<br />";
}
document.getElementById("msgId").innerHTML = s;
}
其中fileReader.result 就是经过加密的图片文件。