功能要求： 使用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
