HTML5 实验报告六（拖放）

最新推荐文章于 2022-04-12 09:28:06 发布

wolongxs_L

最新推荐文章于 2022-04-12 09:28:06 发布

阅读量1.1k

点赞数

分类专栏：实验报告文章标签： html

本文链接：https://blog.csdn.net/m0_51319369/article/details/117106469

版权

实验报告专栏收录该内容

1 篇文章 1 订阅

订阅专栏

在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。使用HTML5拖放API相关技术，在网页上实现仿回收站的类似效果。用户通过拖拽可以将页面上的元素放置到回收站中删除。最终效果图如图所示。

思路：文件拖拽与回收功能的实现

1，文件拖拽的实现

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

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

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

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

2，回收功能的实现

<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文件（recycle）源代码：

/*设置用于放置文件夹的区域样式*/
div#container{
    border: 1px solid;
    width: 300px;
    height: 250px;
    float: left;
}
/*设置文件夹样式*/
.folder{
    text-align: center;
    float: left;
    margin: 20px;
    background: url(../img/folder.png) no-repeat;
    width: 100px;
    height: 80px;
    line-height: 80px;
}
/*设置回收站样式*/
div#recycle {
    width: 200px;
    height: 200px;
    float: left;
    text-align: center;
    background: url(../img/recycle.jpg) no-repeat;
    margin: 30px;
}

追加文件夹和回收站的图片：

wolongxs_L

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
HTML5 实验报告六（拖放）

在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。使用HTML5拖放API相关技术，在网页上实现仿回收站的类似效果。用户通过拖拽可以将页面上的元素放置到回收站中删除。最终效果图如图所示。思路：文件拖拽与回收功能的实现1，文件拖拽的实现<div class="folder" draggable="true" >文件1</div>将回收站设置为可放置区域<div id="recycle.
复制链接

扫一扫