SOURCE

console 命令行工具 X clear

                    
>
console
$(function(){
	$("#numipt").change(function(event) {
		var num = $(this).val().split("");
		$(".num").each(function(i){
			$(this).attr("class","").addClass('num num'+num[i]);
		})
	});

})
var dragbox = document.getElementById("dragbox2");
var liNum = $(".dragul li").length;
var postionX,postionY;
var dragList = $(".dragli");
for (var i=0; i<liNum; i+=1) {
	dragList[i].onselectstart = function() {
		return false;
	};
	//当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖拽对象的上
	dragList[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;
	};
	//当拖拽完成后触发的时间,此事件作用在被拖拽的对象上
	dragList[i].ondragend = function(ev) {
		postionX = ev.x;
		postionY = ev.y;
		$(eleDrag).offset({top: postionY,left: postionX});
		ev.dataTransfer.clearData("text");
		eleDrag = null;
		return false
	};
}
//拖拽元素(在例子中指的是金子、钻石)在目标元素(百宝箱)上移动的时候触发,此事件作用在目标元素上
dragbox.ondragover = function(ev) {
	ev.preventDefault();
	return true;
};
//当拖拽元素进入目标元素的时候触发的事件,此事件作用在目标元素上
dragbox.ondragenter = function(ev) {
	$(this).addClass('openbox');
	return true;
};
//被拖拽的元素在目标元素上 同时 鼠标放开触发的时间,此事件作用在目标元素上
dragbox.ondrop = function(ev) {
	ev.dataTransfer.getData('text');
	$(this).removeClass('openbox');
	if (eleDrag) {
		var word = $(eleDrag).text();
		$(".info").text(word+"已放入百宝箱了!O(∩_∩)O哈哈~");
		$(eleDrag).remove();
	}
	this.style.color = "#000000";
	return false;
};
//被拖拽的元素离开目标元素的时候触发此事件
dragbox.ondragleave = function(){
	console.log(1);
	$(this).removeClass('openbox');
	return false;
}
<div class="slider">
		<div class="wrapper clearfix">
			<ul class="dragul left">
				<li><div class="dragli gold" title="拖拽我" draggable="true"><span class="item">金子</span></div></li>
				<li><div class="dragli jewel" title="拖拽我" draggable="true"><span class="item">钻石</span></div></li>
				<li><div class="dragli pearl" title="拖拽我" draggable="true"><span class="item">珍珠</span></div></li>
			</ul>
			<div class="dragbox2 left" id="dragbox2"></div>
		</div>
		<span class="info"></span>
		
	</div>

<script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
*{margin:0;padding:0;}
body{font-family:"微软雅黑", "Yahei Mono";}
a{text-decoration:none;}
ul{list-style:none;}
.left{float:left;}
.right{float:right;}
.clearfix:before,.clearfix:after{display:block;height:0;content:"";clear:both;visibility:hidden;}
.clearfix{zoom:1;}
.wrapper,.slider{width:1000px;margin:0 auto;}
.dragul{width:500px;}
.dragul li{margin-top:18px;}
.dragli{cursor:move;}
.dragbox2{background:url(http://sandbox.runjs.cn/uploads/rs/173/przefveb/box1_03.png);height:317px;width:343px;margin:18px;text-align:center;line-height:200px;font-size:36px;text-shadow:-1px -1px #fff;}
.info{text-align:center;}
.gold{background:url(http://sandbox.runjs.cn/uploads/rs/173/przefveb/gold_03.png) no-repeat;width:265px;height:122px;}
.jewel{background:url(http://sandbox.runjs.cn/uploads/rs/173/przefveb/jewel_03.png) no-repeat;width:256px;height:207px;}
.pearl{background:url(http://sandbox.runjs.cn/uploads/rs/173/przefveb/peral_03.png) no-repeat;width:276px;height:113px;}
.item{display:none;}
.openbox{background:url(http://sandbox.runjs.cn/uploads/rs/173/przefveb/box2_03.png) no-repeat;height:294px;width:450px;}

.num{width:40px;height:40px;object-fit:none;object-position:0 0;margin-top:40px; vertical-align:bottom; -webkit-transition: object-position .25s;transition: object-position .25s;}
.num1 { object-position: 0 -40px; }
.num2 { object-position: 0 -80px; }
.num3 { object-position: 0 -120px; }
.num4 { object-position: 0 -160px; }
.num5 { object-position: 0 -200px; }
.num6 { object-position: 0 -240px; }
.num7 { object-position: 0 -280px; }
.num8 { object-position: 0 -320px; }
.num9 { object-position: 0 -360px; }

.imgbox{width:500px;height:300px}
.imgbox img{width:100%;height:100%;background:#ABCDEF;object-fit:cover;object-position:0 0