HTML & JAVASCRIPT 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<link rel="stylesheet" href="./recycle.css">
</head>
<body>
<div class="center">
<!-- 标题 -->
<h1>仿回收站效果的设计和实施</h3>
<br/>
<!-- 内容显示区 -->
<div id="container">
<div id="file1" draggable="true" ondragstart="drag(event)">文件1</div>
<div id="file2" draggable="true" ondragstart="drag(event)">文件2</div>
<div id="file3" draggable="true" ondragstart="drag(event)">文件3</div>
<div id="file4" draggable="true" ondragstart="drag(event)">文件4</div>
</div>
<!-- 回收站 -->
<div id="recycle" ondragover="allowDrop(event)" ondrop="drop(event)">
</div>
<script>
// onDragstart回调函数
function drag(ev){
// 设置传递内容为被拖拽元素的id,数据类型为纯文本类型
ev.dataTransfer.setData("text/plain",ev.target.id);
}
// onDragover回调函数
function allowDrop(ev){
// 解禁当前元素为可放置被拖拽元素的区域
ev.preventDefault();
}
function drop(ev){
// 解禁当前元素为可放置被拖拽元素的区域
ev.preventDefault();
// 获取当前被放置元素的id
var id = ev.dataTransfer.getData("text");
// 获取被放置元素
var folder = document.getElementById(id);
// 获取被放置元素的父元素,并用removeChild来删除被放置元素
document.getElementById("container").removeChild(folder);
}
</script>
</div>
</body>
</html>
CSS部分
*{
padding: 0;
margin: 0;
}
h1{
height: 90px;
line-height:90px;
border-bottom: 2px solid black;
}
.center{
width: 1200px;
margin: 0 auto;
}
#container{
width: 55%;
height: 500px;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
}
#container>div{
width: 250px;
height: 150px;
margin: 38px;
float: left;
background-image: url(./文件夹.jpeg);
background-size: cover;
background-position: 0 -50px;
margin-top: 50px;
line-height: 150px;
text-align: center;
font-size: 30px;
}
#recycle{
width: 35%;
height: 500px;
display: inline-block;
background-image: url(./回收站.jpeg);
background-size: 100%;
background-position: center ;
background-repeat: no-repeat;
}