最终展示结果：

API概念：

————来自百度百科

API之主要目的是提供应用程序与开发人员以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。提供API所定义的功能的软件称作此API的实现。API是一种接口，故而是一种抽象。

应用程序接口（英语：Application Programming Interface，简称：API），又称为应用编程接口，就是软件系统不同组成部分衔接的约定。由于近年来软件的规模日益庞大，常常需要把复杂的系统划分成小的组成部分，编程接口的设计十分重要。程序设计的实践中，编程接口的设计首先要使软件系统的职责得到合理划分。良好的接口设计可以降低系统各部分的相互依赖，提高组成单元的内聚性，降低组成单元间的耦合程度，从而提高系统的维护性和扩展性。

源码：

html及js部分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3.1HTML5拖放API，回收站效果</title><link rel="stylesheet" type="text/css" 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 type="text/javascript">// ondragstart事件回调函数function drag(ev){//设置传递的内容为被拖曳元素的id名称，数据类i选哪个为纯文本类型ev.dataTransfer.setData('text/plain',ev.target.id);}//ondrafover事件回调函数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部分：

/* 设置用于放置文件夹的区域样式 */
#container{border: 1px solid;width: 300px;height: 250px;float: left;
}
/* 设置文件夹样式 */
.folder{text-align: center;float: left;margin: 20px;background: url(../images/folder_img.png) no-repeat;width: 100px;height: 80px;line-height: 80px;
}
/* 设置回收站样式 */
#recycle{width: 200px;height: 200px;float: left;text-align: center;background: url(../images/recycle_img.png) no-repeat;margin: 30px;
}

image资源

————ps修饰的png文件

HTML5拖放API，回收站效果相关推荐

基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果
这是一份很简单的作业,由于百度当时没找到,就自己写了一下,命名不是很机智只是为了写的快且好懂,使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片,代码很短好理解.. <!DOCTYP ...
html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看. 实现功能: 将桌面图片拖入 ...
html相框自动生成功能,网页制作HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
HTML5自动生成相框,HTML5拖放API实现自动生成相框功能
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息. 相框需要自己配置,设置为背景,在CSS中设置. 效果如图: html部分: H5拖放API之图片相框效果 > 请将图片拖放至此处 CSS ...
html5相框,科技常识：HTML5拖放API实现自动生成相框功能
今天小编跟大家讲解下有关HTML5拖放API实现自动生成相框功能 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5拖放API实现自动生成相框功能的相关资料,希望小伙伴们看了有所帮 ...
HTML5拖放API
1. 开启拖放将将要拖放的对象元素的draggable属性设置为true,任何元素均可实现拖放,但img与a元算(必须制定href)默认允许拖放. 2.与拖放相关的事件事件产生事件的元素描述 ...
html拖放api之图片相框,html5拖放API简介及应用
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 通常我们在上传文件时,需要使用这样的上传文件标签.而在html5中,它提供了拖放的接口,以下的内容就是对html5拖放 ...
Vue结合HTML5拖放API 实现目录拖拽～
拖放事件 dom被拖拽--->经过一些dom--->到达指定dom 被拖拽的dom:(源对象) dragstart 源对象被拖拽 drag 源对象拖拽过程中 dragend 源对象拖拽结束 ...
HTML5拖放API(代码展示)
源代码展示其中HTML结构如下: <div class="dustbin"><br />垃<br />圾<br />箱</d ...

HTML5拖放API，回收站效果