接受拖过来的元素要接受新元素，ondragover 事件触发的时候要禁止自设的默认事件e.preventDefault()
监听ondrop事件，将元素进行插入appendChild；
试试去吧<!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>
拖拽发生过程被拖拽元素
dragstart按下鼠标键并开始移动鼠标时
drag在dragstart事件之后，在元素被拖动期间会持续触发该事件
dragend当拖动停止时，会触发dragend事件
放置目标元素
dragenter有元素被拖动到放置目标上
dragover紧随dragenter发生，在被拖动的元素
还在放置目标范围内移动时，会持续触发该事件
dragleave在元素被拖出放置目标时触发
drop元素被放到了放置目标中触发
注释：拖拽发生过程：dragstart->drag->dragenter->dragover->dragleave/drop->dragend
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）