html回收站实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/index.css" type="text/css"/>
<script src="../js/index.js"></script>
</head>
<body>
<img src="../image/u=2614587031,3031375111&fm=21&gp=0.jpg" ondrop="drop(event)" ondragover="allowDrop(event)"/>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="../image/BluePlane.png" draggable="true" ondragstart="drag(event)" id="img1"/>
<img src="../image/GodPlane.png" draggable="true" ondragstart="drag(event)" id="img2"/>
<img src="../image/GreenPlane.png" draggable="true" ondragstart="drag(event)" id="img3"/>
</div>
<p id="p1">这是一个回收站</p>
</body>
</html>
*{margin:0px;padding:0px}
#div1{width:220px;height:220px;border:3px solid #ffff00;position:absolute;left:250px;top:0px}
#p1{color:#0000ff;font-family:"方正喵呜体";font-size:36px;text-shadow:3px 3px 12px #ff0000}
#div1 #img1,#img2,#img3{width:60px;height:60px;display:block}/*图片大小可以用img标签的宽高属性设置*/
#img1{position:absolute;left:80px;top:10px}
#img2{position:absolute;left:80px;top:80px}
#img3{position:absolute;left:80px;top:150px}/*absolute定位是相对于定了位的父级元素，而relative是相对于自身定位的*/
/**
* Created by Jack's on 2015/8/9.
*/
//window.onload=function(){}---不能用这个，否则js效果实现不了
function drag(e){
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e){
e.preventDefault();
}
function drop(e){
var data=e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));//data不能加引号
e.preventDefault();//还有注意大小写
}
相关文章
最新发布
阅读排行
热门文章
猜你喜欢