HTML5 实验报告六（拖放） |
您所在的位置：网站首页 › 相框展厅效果图 › HTML5 实验报告六（拖放） |
HTML5 实验报告六（拖放）
|
在Windows等操作系统中均包含回收站功能，用户可以直接将不需要的文件拖拽并放置到桌面回收站图标上以实现文件删除。使用HTML5拖放API相关技术，在网页上实现仿回收站的类似效果。用户通过拖拽可以将页面上的元素放置到回收站中删除。最终效果图如图所示。
思路：文件拖拽与回收功能的实现 1，文件拖拽的实现 文件1将回收站设置为可放置区域 //ondragover事件回调函数 function allowDrop(ev) { //解禁当前元素为可放置被拖拽元素的区域 ev.preventDefault(); }2，回收功能的实现 文件1 //ondragstart事件回调函数 function drag(ev) { //设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型 ev.dataTransfer.setData("text/plain", ev.target.id); } //ondrop事件回调函数 function drop(ev) { ev.preventDefault(); //解禁当前元素为可放置被拖拽元素的区域 var id = ev.dataTransfer.getData("text"); //获取当前被放置的元素id名称 var folder = document.getElementById(id); //根据id名称获取元素对象 //获取文件夹区域并删除该元素对象 document.getElementById("container").removeChild(folder); }
源代码如下： HTML5拖放API之回收站效果 HTML5拖放API之回收站效果 文件1 文件2 文件3 文件4 //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); } 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; }
追加文件夹和回收站的图片： |
【本文地址】