HTML5拖放API之回收站效果

最新推荐文章于 2022-03-11 14:25:10 发布

Sumer9410

最新推荐文章于 2022-03-11 14:25:10 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_43220751/article/details/103332494

版权

本文介绍了如何使用HTML5的拖放API创建一个回收站效果。通过JavaScript实现文件夹元素拖放到回收箱后进行删除，并在删除前弹出提示对话框。实验旨在帮助读者熟悉DOM操作、JavaScript事件处理以及HTML5拖放API的使用。

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

HTML5拖放API之回收站效果

效果展示
文件可拖至右边垃圾桶回收

js

(1) 拖放删除功能。当拖拽页面上文件夹元素至页面上回收箱图标并释放鼠标时，文件夹被删除。
(2) 弹出对话框功能，在删除文件时，弹出提示框（alert语句）。

        var img1=document.getElementById('img1');
        var img2=document.getElementById('img2');
        var img3=document.getElementById('img3');
        var img4=document.getElementById('img4');
        img1.addEventListener('dragstart',dragstartevent1);
        img2.addEventListener('dragstart',