标签:ott name UNC style tag border nts default 环境保护
鸥柏根据国家制定的统一标识,生活垃圾桶分为四类:可回收垃圾、不可回收垃圾、危险垃圾和其他垃圾。可回收废物是指适合回收利用的废物,包括纸张、塑料、玻璃、织物、瓶子、罐头等,收集在蓝色垃圾容器中;危险废物是指含有危险物质,需要特殊安全处理的废物,包括电池、灯具、日用品等红色垃圾桶收集,其他垃圾为未分类垃圾,由灰色垃圾桶装置收集。
从上面我们可以看到危险的垃圾桶是红色的。将来,当我们对垃圾分类时,不要弄错了。
分类垃圾桶,无论从其实际使用价值还是实用价值,鸥柏还是其质量和价格都是突出的。首先,人们对垃圾桶进行分类,垃圾桶是我们生活中家家户户看不见的、无私的东西。当我们最需要他们的时候,他们会出现在我们面前。我们有意识地忽视了他们认为生活必需品是家庭的一部分。当垃圾的整体变化能够实现自身价值并超越自身时,就可以显示出发展的力量。广阔的市场和无限的发展潜力给生活和环境保护带来了无形的力量。
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;
标签:ott name UNC style tag border nts default 环境保护
原文地址:https://www.cnblogs.com/blogst/p/12357486.html