效果

参考教程：

W3school:

http://www.w3school.com.cn/html5/html_5_draganddrop.asp

菜鸟教程：

http://www.runoob.com/jsref/event-ondragend.html

关键知识点：

在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

实现

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>垃圾箱</title><style>ul{overflow:hidden;}li{width:80px;height: 50px;line-height:50px;border:1px solid #000;margin:20px;list-style:none;float:left;}#out{width:100px;height: 150px;background:url() 0 0 no-repeat;margin:100px;background-size:100%;color:red;border:4px solid #000;text-align:center;}</style></head><script type="text/javascript">window.onload=function(){<!-- 获取到所有li标签 -->var ali=document.getElementsByTagName('li');<!-- 通过id获取到垃圾箱 -->var oDiv=document.getElementById("out");<!-- 通过id获取到删除提示 -->var txt=document.getElementById("txt");var targetLi=null//拖拽事件，循环获取到的li标签的长度for(var i=0;i<ali.length;i++){<!-- ondragstart 事件在用户开始拖动元素或选择的文本时触发。 --><!-- 这里是拖动每一个li标签时触发函数 -->ali[i].ondragstart=function(ev){<!-- 将拖动的元素的背景颜色设置为黄色 -->this.style.background='yellow'; <!-- 将当前拖拽的元素赋给targetLi -->targetLi=this;<!-- dataTransfer.setData() 方法设置被拖数据的数据类型和值 --><!-- 在这个例子中，数据类型是 "Text"，值是拖动元素的 innerHTML -->ev.dataTransfer.setData('Text',this.innerHTML);}<!-- ondragend 事件在用户完成元素或首选文本的拖动时触发 -->ali[i].ondragend=function(){this.style.backgroud=""}}<!-- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 -->oDiv.ondragenter=function(){this.style.borderColor='red'}<!-- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 -->oDiv.ondragover=function(ev){ev.preventDefault()}<!-- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 --><!-- 离开后垃圾箱边框恢复黑色 -->oDiv.ondragleave=function(){this.style.borderColor='#000'}<!-- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 -->oDiv.ondrop=function(ev){this.style.borderColor='#000'var oText=ev.dataTransfer.getData('Text');txt.innerHTML="删除的是："+oText;targetLi.parentNode.removeChild(targetLi);}}</script><body><ul><li draggable="true">白色垃圾</li><li draggable="true">大气污染</li><li draggable="true">香蕉皮</li><li draggable="true">易拉罐</li><li draggable="true">白色垃圾</li></ul><p id="txt"></p><div id="out">垃圾箱</div></body>
</html>

Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂相关推荐

HTML5垃圾桶效果,Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
效果参考教程: W3school: 菜鸟教程: 关键知识点: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondra ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班(五)
FullCalendarDemo5 控件的实例讲解-拖拽实现值班排班(五) (五)c# asp.net 操作FullCalendarDemo5 导出排班记录目的:点击导出按钮,弹出参数指定对话框,选 ...
matlab画二位温度场图（代码带注释）
matlab画二位温度场图(代码带注释) 实验设备二维温度图情况实验设备设备各个采集温度坐标点如下所示a %给定一个矩形区域76x125 %%这个区域20个离散点就是第一个时间段的温度,采样的2 ...
写html前端代码的软件_你能看懂高贵的前端程序员的工作内容？
高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上人生巅峰的职业梦想?这篇<进化论:从0到100,前端猿茁 ...
html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
Silverlight中的拖拽实现的图片上传---1
在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接放到浏览器中,我在想使用这个功能来做成图片上传(或者文件上传),这样的用户体验将会是非常好的. 传统的上传都是打开对话框,选择 ...
html拖拽显示获取坐标,html界面元素拖拽实现［超简单］
就是一个十分简单的小功能,将一个html界面元素从一个地方拖到另一个地方(复制或移动) html部分,省略部分非关键代码 A股拖拽js部分, 即监听部分 $('#ma').bind('dragsta ...
Unity3D鼠标拖拽实现相机移动
实现拖拽的方法: 通过创建一个X-Z平面得到从屏幕发出的射线到当前X-Z平面的碰撞点得到的位置作为起始位置和结束位置当鼠标按下的时候得到的是初始位置当鼠标松开的时候得到的是结束位置得到两 ...

Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂

效果

参考教程：

实现

Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂相关推荐

最新文章

热门文章