仿回收站效果的设计与实现

最新推荐文章于 2021-06-04 04:04:25 发布

非空空如也哉

最新推荐文章于 2021-06-04 04:04:25 发布

阅读量700

点赞数

分类专栏：入门自学文章标签： js html5 css3

本文链接：https://blog.csdn.net/AdSensca/article/details/115625531

版权

入门同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

自学

16 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML5和JavaScript创建一个仿回收站效果。通过拖放操作，用户可以将文件元素从内容显示区移动到回收站，实现元素的删除。博客内容包括HTML结构、CSS样式和JavaScript事件处理函数，如ondragstart、ondragover和ondrop，用于处理拖放行为和元素移除。

摘要由CSDN通过智能技术生成

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;
}

在这里插入图片描述

非空空如也哉

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
仿回收站效果的设计与实现

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"
复制链接

扫一扫

专栏目录