<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style rel="stylesheet">
.goods {
width: 500px;
border: 1px solid red;
padding: 30px;
height: 150px;;
}
.good {
float: left;;
margin: 10px 20px;;
width: 100px;
height: 100px;;
}
#one {
background: green;
}
#two {
background: black;
color: #ffffff;
}
#three {
background: pink;
}
.destination {
width: 600px;;
height: 500px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
默认顺序 1 2 3
<div class="goods">
物品容器
<div class="good" id="temp" data-type="one"> </div>
<div class="good" id="" data-type="two">2</div>
</div>
仓库
<div class="destination">
</div>
<script type="text/javascript">
//容器类
function Container(obj) {
this.goods = document.querySelectorAll(obj.goods) || [];
this.rule = obj.rule || [];
this.relSort = [];
this.container = document.querySelector(obj.container) || document.body;
this.ondrag = obj.ondrag || null;
this.addEvent(this.goods);
this.count = this.goods.length;
this.success = obj.success || null;
this.failed = obj.failed || null;
}
Container.prototype.compare = function (arr1, arr2) {
var result = true;
arr1.forEach(function (item, index) {
if (item != arr2[index]) {
result = false;
}
})
return result;
}
Container.prototype.addEvent = function (goods) {
var me = this;
Array.prototype.forEach.call(goods, function (item) {
item.setAttribute('draggable', true);
item.ondragstart = function (e) {
if (me.ondrag) {
e.dataTransfer.setData("id", e.target.id);
me.ondrag.call(me, e);
}
}
});
this.container.ondrop = function (e) {
e.preventDefault();
var source = e.dataTransfer.getData("id");
e.target.appendChild(document.querySelector('#' + source));
me.relSort.push(source);
if (me.relSort.length == me.count) {
if (me.compare(me.rule, me.relSort)) {
me.success && me.success.call(me);
} else {
me.failed && me.failed.call(me);
}
}
}
this.container.ondragover = function (e) {
e.preventDefault();
}
}
var a = new Container({
goods: '.good',//需呀拖动物体的选择器
rule: ['one', 'two', 'three'], //正确的顺序
container: '.destination',// 载体选择器
ondrag: function (e) { //开始拖动事件
},
success: function () {//如果游戏成功 回调函数
alert('你赢了');
},
failed: function () {//如果游戏失败 回调函数
alert('游戏失败');
}
});
</script>
</body>
</html>
