JS制造的垃圾桶

Posted 2021-03-07 blogcccc

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

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;