鸥柏根据国家制定的统一标识,生活垃圾桶分为四类:可回收垃圾、不可回收垃圾、危险垃圾和其他垃圾。可回收废物是指适合回收利用的废物,包括纸张、塑料、玻璃、织物、瓶子、罐头等,收集在蓝色垃圾容器中;危险废物是指含有危险物质,需要特殊安全处理的废物,包括电池、灯具、日用品等红色垃圾桶收集,其他垃圾为未分类垃圾,由灰色垃圾桶装置收集。
从上面我们可以看到危险的垃圾桶是红色的。将来,当我们对垃圾分类时,不要弄错了。
分类垃圾桶,无论从其实际使用价值还是实用价值,鸥柏还是其质量和价格都是突出的。首先,人们对垃圾桶进行分类,垃圾桶是我们生活中家家户户看不见的、无私的东西。当我们最需要他们的时候,他们会出现在我们面前。我们有意识地忽视了他们认为生活必需品是家庭的一部分。当垃圾的整体变化能够实现自身价值并超越自身时,就可以显示出发展的力量。广阔的市场和无限的发展潜力给生活和环境保护带来了无形的力量。
html部分:
<div> <div class="dustbin"> 垃<br /> 圾<br /> 箱<br /> </div> <div class="dragbox"> <div class="draglist" draggable="true">列表1</div> <div class="draglist" draggable="true">列表2</div> <div class="draglist" draggable="true">列表3</div> <div class="draglist" draggable="true">列表4</div> <div class="draglist" draggable="true">列表5</div> <div class="draglist" draggable="true">列表6</div> </div> </div> <div class="dragremind"></div>
css部分:
body { font-size: 84%; } .dustbin { width: 100px; height: 260px; line-height: 1.4; background: gray; font-size: 36px; font-family: "微软雅黑", "microsoft yahei"; text-align: center; text-shadow: -1px -1px #bbb; float: left; } .dragbox { width: 500px; padding-left: 10px; float: left; } .draglist { padding: 8px; margin-bottom: 5px; border: 2px dashed #ccc; background: #eee; cursor: move; } .draglist:hover { border-color: #cad5eb; background: #f0f3f9; } .dragremind { padding-top: 2em; clear: both; }
js部分:
var $ = function(selector){ if(!selector){ return []; } var arrEle = []; if (document.querySelectorAll){ arrEle = document.querySelectorAll(selector); }else{ var oAll = document.getElementsByTagName("div"), lAll = oAll.length; if(lAll){ var i = 0; for (i; i<lAll; i+=1 ) { if (/^\./.test(selector)) { if (oAll[i].className === selector.replace(".","")) { arrEle.push(oAll[i]); } }else if (/^#/.test(selector)) { if (oAll[i].id === selector.replace("#","")) { arrEle.push(oAll[i]); } } } } } return arrEle; }; var eleDustbin = $(".dustbin")[0],eleDrags = $(".draglist"), lDrags = eleDrags.length,eleRemind = $(".dragremind")[0], eleDrag = null; for (var i = 0; i<lDrags; i+=1) { eleDrags[i].onselectstart = function(){ return false; }; eleDrags[i].ondragstart = function(ev){ ev.dataTransfer.effectAllowed = "move"; ev.dataTransfer.setData("text", ev.target.innerHTML); ev.dataTransfer.setDragImage(ev.target, 0, 0); eleDrag = ev.target; return true; }; eleDrags[i].ondragend = function(ev){ ev.dataTransfer.clearData("text") eleDrag = null; return false; }; } eleDustbin.ondragover = function(ev){ ev.preventDefault(); return true; }; eleDustbin.ondragenter = function(ev){ this.style.color = "#ffffff"; return true; }; eleDustbin.ondrop = function(ev){ if(eleDrag){ eleRemind.innerHTML += ‘<strong>"‘+eleDrag.innerHTML+ ‘"</strong>被扔进了垃圾箱<br>‘; eleDrag.parentNode.removeChild(eleDrag); } this.style.color = "#000000"; return false;