html拖拽垃圾桶,html5拖放-垃圾桶效果

html5拖放-垃圾桶效果

什么事拖放(drag)

drag&drop：拖放指的是html5提供专门的拖拽与投放的API

拖放api的用处/优势

1.提供专门的拖拽与投放的API

2.触发多个事件，可控制鼠标的形状与移动时的效果

3.可以跨页面拖放

拖放api的基本操作语法

draggable属性

拖拽事件-

ondragstart：鼠标按下并开始移动时触发,

drag：元素拖拽过程中持续触发,

dragend：元素停止拖拽时触发的函数

投放时间-

dragenter,当我们的拖拽对象进入投放区域时

dragover,当拖拽对象在投放区域移动时持续触发的函数

dragleave,当拖拽对象离开投放区域时

drop，拖拽对象投放在了投放区时触发的函数

因为浏览器对DOM元素的默认都是不允许一个DOM元素拖放到另一个DOM元素内的，所以我们在投放区的事件里边都要进行阻止默认事件，尤其是在dragover中一定要执行阻止默认事件，所以在投放区时，我们一定要注意默认事件的阻止，

dataTransfer对象

专门用于携带拖放过程中的数据，

setData：将拖拽元素的数据存入到dataTransfer对象当中去，由这个对象来存放携带元素的数据

getData：读取

setDragImage：来指定一个图标，当发生拖动时，显示在光标下方的一个图标是什么

利用拖放api+js实现垃圾桶效果

css

ul{overflow:hidden;

}li{width:80px;height:50px;text-align:center;line-height:50px;border:1px solid #333;margin:20px;list-style:none;float:left;

}#out{width:100px;height:150px;background:url("../img/ljt.png") 0 20px no-repeat;margin:100px;background-size:100%;color:red;border:4px solid #000;text-align:center;

}

html

白色垃圾

大气污染

香蕉皮

易拉罐

废纸屑

垃圾箱