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

最新推荐文章于 2024-04-22 15:58:10 发布

YQEMMMM

最新推荐文章于 2024-04-22 15:58:10 发布

阅读量2.1k

点赞数 4

分类专栏： HTML专栏文章标签： css html5

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109180951

版权

HTML专栏专栏收录该内容

15 篇文章 8 订阅

订阅专栏

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

功能要求：
使用HTML5拖放API相关技术，在网页上实现仿回收站的类似效果。用户通过拖拽可以将页面上的元素放置到回收站中删除。
实现效果：
在这里插入图片描述

一、界面设计核心技术概括
1.使用<div>标签划分区域
1）文件展示区域
2）回收站区域

2.使用<div>标签制作示例文件
2）4个示例文件
在这里插入图片描述

二、文件拖拽与回收功能的实现
1.文件拖拽的实现

<div class="folder" draggable="true" >文件1</div>

2.将回收站设置为可放置区域

<div id="recycle" ondragover="allowDrop(event)" ></div>

 //ondragover事件回调函数
    function allowDrop(ev) {
        //解禁当前元素为可放置被拖拽元素的区域
        ev.preventDefault();
    }

3.回收功能的实现

<div id="file1" class="folder" draggable="true" ondragstart="drag(event) " >文件1</div>

//ondragstart事件回调函数
    function drag(ev) {
        //设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型
        ev.dataTransfer.setData("text/plain", ev.target.id);
    }

<div id="recycle" ondragover="allowDrop(event)" ondrop="drop(event)" ></div>

    //ondrop事件回调函数
    function drop(ev) {
        ev.preventDefault(); //解禁当前元素为可放置被拖拽元素的区域
        var id = ev.dataTransfer.getData("text"); //获取当前被放置的元素id名称
        var folder = document.getElementById(id); //根据id名称获取元素对象
        //获取文件夹区域并删除该元素对象
        document.getElementById("container").removeChild(folder);
    }

三、完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5拖放API之回收站效果</title>
  <link rel="stylesheet" href="css/recycle.css">
    </head>
    <body>
        <h3>HTML5拖放API之回收站效果</h3>
        <hr />
  <!--文件展示区域-->
        <div id="container">
            <div id="file1" class="folder" draggable="true" ondragstart="drag(event)">
                文件1
            </div>
            <div id="file2" class="folder" draggable="true" ondragstart="drag(event)">
                文件2
            </div>
            <div id="file3" class="folder" draggable="true" ondragstart="drag(event)">
                文件3
            </div>
            <div id="file4" class="folder" 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();
            }
            //ondrop事件回调函数
   function drop(ev) {
    //解禁当前元素为可放置被拖拽元素的区域
                ev.preventDefault();
    //获取当前被放置的元素id名称
                var id = ev.dataTransfer.getData("text");
    //根据id名称获取元素对象
                var folder = document.getElementById(id);
    //获取文件夹区域并删除该元素对象
                document.getElementById("container").removeChild(folder);
            }
        </script>
    </body>
</html>

备注：CSS代码见附件
https://download.csdn.net/download/YQEMMMM/12982765

YQEMMMM

关注

4
点赞
踩
11

收藏

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

仿回收站效果的设计与实现功能要求：使用HTML5拖放API相关技术，在网页上实现仿回收站的类似效果。用户通过拖拽可以将页面上的元素放置到回收站中删除。实现效果：一、界面设计核心技术概括1.使用<div>标签划分区域1）文件展示区域2）回收站区域2.使用<div>标签制作示例文件2）4个示例文件二、文件拖拽与回收功能的实现1.文件拖拽的实现<div class="folder" draggable="true" >文件1</div>
复制链接

扫一扫