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

效果

参考教程：

W3school:

菜鸟教程：

关键知识点：

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

实现

垃圾箱

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;

}

window.οnlοad=function(){

var ali=document.getElementsByTagName('li');

var oDiv=document.getElementById("out");

var txt=document.getElementById("txt");

var targetLi=null

//拖拽事件，循环获取到的li标签的长度

for(var i=0;i

ali[i].οndragstart=function(ev){

this.style.background='yellow';

targetLi=this;

ev.dataTransfer.setData('Text',this.innerHTML);

}

ali[i].οndragend=function(){

this.style.backgroud=""

}

oDiv.οndragenter=function(){

this.style.borderColor='red'

}

oDiv.οndragοver=function(ev){

ev.preventDefault()

}

oDiv.οndragleave=function(){

this.style.borderColor='#000'

}

oDiv.οndrοp=function(ev){

this.style.borderColor='#000'

var oText=ev.dataTransfer.getData('Text');

txt.innerHTML="删除的是："+oText;

targetLi.parentNode.removeChild(targetLi);

}

白色垃圾
大气污染
香蕉皮
易拉罐
白色垃圾

垃圾箱

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

Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
效果参考教程: W3school: http://www.w3school.com.cn/html5/html_5_draganddrop.asp 菜鸟教程: http://www.runoob.c ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班(五)
FullCalendarDemo5 控件的实例讲解-拖拽实现值班排班(五) (五)c# asp.net 操作FullCalendarDemo5 导出排班记录目的:点击导出按钮,弹出参数指定对话框,选 ...
html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
html5拖拽实现拼图,HTML5技术之图像处理：一个滑动的拼图游戏
HTML5有许多功能特性可以把多媒体整合到网页中.使用canvas元素可以在这个空白的画板上填充线条,载入图片文件,甚至动画效果. 在这篇文章中,我将做一个滑动拼图的游戏用来展示HTML5 canva ...
HTML5 元素拖拽实现及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" co ...
使用HTML5拖拽实现表格列移动
纯前端的移动,不重载数据,不支持换页和数据刷新实现代码,调用在表格加载完成之后 function add_drag_th(){//允许放入 $("#callGrid tr>th&qu ...
前端-拖拽实现列表排序
转载至https://www.crazyming.com/note/757/ 使用拖拽功能来实现排序. 需要先学习w3cschool 关于拖拽的教程:http://www.w3school.com.c ...
Silverlight中的拖拽实现的图片上传---1
在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接放到浏览器中,我在想使用这个功能来做成图片上传(或者文件上传),这样的用户体验将会是非常好的. 传统的上传都是打开对话框,选择 ...

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

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

最新文章

热门文章