您的位置：首页 > Web前端 > JavaScript

JavaScript -- drop,drag的使用

2016-05-09 10:44 525 查看

拖拽网页图片：

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航