【HTML5拖放API项目】-仿回收站效果设计

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

多沄

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

阅读量2.1k

点赞数 5

文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_46208945/article/details/108060012

版权

第三章 HTML5拖放API项目

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

功能要求：在网页上实现仿回收站的类似效果，用户通过拖曳可以将页面上的元素放到回收站中删除。

3.1.1 文件拖曳功能的实现

为4个用于显示文件夹图标的div元素添加dragggable属性并将属性值设置为true即可。但是目前还未设置可放置区域，因此文件只可以被拖曳，还无法放置到指定区域。

该部分实现的效果图：

HTML5部分代码：

<div id="container">
        <div class="folder"  draggable="true" >
        文件1			
        </div>
        <div class="folder" draggable="true">
        文件2			
        </div>
        <div class="folder"  draggable="true"  >
        文件3		
        </div>
        <div class="folder"  draggable=