我想要把拖拽的图片放到div中,然后图片消失,但是不知道怎么弄。
然后就是拖放功能在使用浏览器的开发者工具查看是就失效了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
#div1{
width: 6.25rem;
height: 6.25rem;
border: 3px solid red;
position: absolute;
left: 25rem;
top: 18.75rem;
}
img{
width: 6.25rem;
height: 6.25rem;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img src="quote.png" id="myimg" draggable="true" ondragstart="dg(event);"/>
</body>
<script type="text/javascript">
function dg(e){
//将拖动的元素的id传递到后面的事件函数
e.dataTransfer.setData("eid",e.target.id);
}
function allowDrop(e){
//获取被拖动的元素的id
//var id=e.dataTransfer.getData("eid")
//阻止默认行为
e.preventDefault();
}
function drop(e){
//阻止默认行为
e.preventDefault();
//获取被拖动的元素的id
var data=e.dataTransfer.getData("eid");
//进行dom操作
//e.target指的是div
//appendChild添加元素
e.target.appendChild(document.getElementById(data));
}
</script>
</html>