标签：
拖拽网页图片：
h5的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style>
.box{
width: 400px;
height: 400px;
}
#box1{
background-color: gray;
}
</style>
<script src="app.js"></script>
</head>
<body>
<div id="box1" class="box"></div>
<img id="img1" src="1.png" width="200px" height="200px">
<div id="msg"></div>
</body>
</html>js文件内容：
var box1Div,msgDiv,img1;
window.onload = function(){
// 得到块
box1Div = document.getElementById("box1");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
3
//box1Div.ondragenter = function(e){
// showObj(e);
//}
box1Div.ondragover = function(e){
e.preventDefault();
}
img1.ondragstart = function(e){
e.dataTransfer.setData("imgID","img1");
}
// 取出数据后,把它放在要显示的点
box1Div.ondrp = function(e){
showObj(e.dataTransfer);
e.preventDefault();
// 创建新的节点
var img = document.getElementById(e.dataTransfer.getData("imgID"));
box1Div.appendChild(img);
}
}
// 打印拖拽事件详情
function showObj(obj){
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML = s;
}
拖拽本地文件至网页：
h5文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地拖拽</title>
<style>
#imgContainer{
background-color: red;
width:500px;
height: 500px;
}
</style>
<script src="app1.js"></script>
</head>
<body>
<div id="imgContainer"></div>
<div id="msg"></div>
</body>
</html>JS文件中：
var imgContainer,msgDiv;
window.onload = function(){
imgContainer = document.getElementById("imgContainer");
msgDiv = document.getElementById("msg");
imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
//showObj(e);
var f = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function(e){
showObj(e);
imgContainer.innerHTML = "<img src= \""+fileReader.result+"\">"
}
fileReader.readAsDataURL(f);
}
}
function showObj(obj){
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML = s;
}
标签：
原文地址：http://blog.csdn.net/redguy_anluo/article/details/51351361
