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

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

仿回收站效果的设计与实现相关推荐

pid控制器matlab仿真研究,基于MATLAB仿真的PID控制器设计毕业设计
基于MATLAB仿真的PID控制器设计毕业设计基于 MATLAB 仿真的 PID 控制器设计摘要本论文以温度控制系统为研究对象设计一个 PID 控制器.PID 控制是迄今为止最通用的控制方法, ...
仿新浪微博客户端--界面设计（1）
仿新浪微博客户端--界面设计(1) 2013年9月16日新浪微博客户端继续开发其实这些页面已经做好很久了,因为一直有其他事情要做,所以没太多时间发博客.关于新浪微博客户端的界面我想玩过微博的人都比 ...
HTML5拖放API，回收站效果
目录最终展示结果: API概念: 源码: html及js部分 css部分: image资源最终展示结果: API概念: ----来自百度百科 API之主要目的是提供应用程序与开发人员以访问一组例程 ...
【荐】JS实现类似星球仿flash效果的动态菜单
代码简介:推荐朋友们看看,非常值得,JS类似flash,又有点星空的感觉. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
HTML5期末大作业：仿唯品会购物网站设计——仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品商城网站设计
HTML5期末大作业:仿唯品会购物网站设计--仿唯品会购物商城(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品商城网站设计常见网页设计作业题材有个人. 美食. 公司. ...
HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有 ...
仿wordpress管理后台设计的后台管理框架
仿wordpress管理后台设计的后台管理框架本Markdown编辑器使用[StackEdit][6]修改而来,用它写博客,将会带来全新的体验哦: html的padding-top来实现整体下移,然 ...
java 仿qq mysql_基于Java远程通信(仿QQ)及应用研究设计(MySQL)(含录像)
基于JAVA远程通信(仿QQ)及应用研究设计(MySQL)(含录像)(毕业论文13000字,程序代码,MySQL数据库) 随着信息社会脚步的日益加快,远程通信的应用正在人们的生产生活中扮演着极其重要的 ...
linux课程设计QQ聊天带界面,仿QQ聊天系统课程设计解析.doc
仿QQ聊天系统课程设计解析目录绪论1 一．需求分析1 1.1软件功能需求分析2 1.2 安全需求分析2 二．总体设计3 2.1 软件结构图3 2.2 功能描述3 2.2.1注册功能概要4 2.2. ...

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

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

仿回收站效果的设计与实现相关推荐

最新文章

热门文章