HTML5如何实现元素拖拽
1个回答
展开全部
试试去吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="1.jpg">
<div id="msg"></div>
<script>
var box1Div,box2Div,msgDiv,img1;
window.onload = function () {
box1Div = document.getElementById("box1");
box2Div = document.getElementById("box2");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
// box1Div.ondragenter = function (e) {
// showObj(e);
// }
box1Div.ondragover = function (e) {
e.preventDefault();//阻止系统默认事件
}
box2Div.ondragover = function (e) {
e.preventDefault();//阻止系统默认事件
}
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId","img1");
}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
}
function dropImghandler(e) {
showObj(e.dataTransfer);
e.preventDefault();
var img = document.getElementById(e.dataTransfer.getData("imgId"));
//box1Div.appendChild(img);
e.target.appendChild(img);
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML = s;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="1.jpg">
<div id="msg"></div>
<script>
var box1Div,box2Div,msgDiv,img1;
window.onload = function () {
box1Div = document.getElementById("box1");
box2Div = document.getElementById("box2");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
// box1Div.ondragenter = function (e) {
// showObj(e);
// }
box1Div.ondragover = function (e) {
e.preventDefault();//阻止系统默认事件
}
box2Div.ondragover = function (e) {
e.preventDefault();//阻止系统默认事件
}
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId","img1");
}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
}
function dropImghandler(e) {
showObj(e.dataTransfer);
e.preventDefault();
var img = document.getElementById(e.dataTransfer.getData("imgId"));
//box1Div.appendChild(img);
e.target.appendChild(img);
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>"
}
msgDiv.innerHTML = s;
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
