之前还好好的,代码也没有一点改动
然后就报错
Uncaught Sortable: el
must be HTMLElement, and not [object Null]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="Sortable.js"></script>
<script src="jquery.js"></script>
<style>
.sotr {
width: 500px;
height: 300px;
margin: 100px auto 10px;
border: 1px solid #ddd;
}
.sotr a {
float: left;
display: block;
width: 100px;
height: 100px;
margin: 10px;
}
.click {
width: 100px;
height: 100px;
background: #DDDDDD;
margin: 0 auto;
text-align: center;
}
.upset {
width: 100px;
height: 100px;
background: #DDDDDD;
margin: 0px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="sotr" class="sotr">
<a data-index='0' style="background: #aa0000;">1</a>
<a data-index='1' style="background: #005500;">2</a>
<a data-index='2' style="background: #aa5500;">3</a>
<a data-index='3' style="background: #59d57f;">4</a>
<a data-index='4' style="background: #00ffff;">5</a>
<a data-index='5' style="background: #ff007f;">6</a>
<a data-index='6' style="background: #ffff7f;">7</a>
<a data-index='7' style="background: #5500ff;">8</a>
</div>
<div id="click" class="click">提交</div>
<div id="upset" class="upset">打乱</div>
</body>
<script>
window.onload = function () {
/////////初始滑动插件
var foo = document.getElementById("#sotr");
Sortable.create(foo, {
group: "adva"
});
function shffle() {
let array = $('#sotr a')
let usedIndex = []
let newArray = []
let validCount = []
top:
while (validCount < array.length) {
let index = Math.floor(Math.random() * array.length)
if (usedIndex.indexOf(index) > -1) {
continue top
} else {
usedIndex.push(index)
}
validCount++
newArray.push(array[index])
}
let newarr = shuffle()
for (let item of newarr) {
$('#sotr').append(item)
}
}
$('#upset').on('click', shffle)
}
</script>
</html>
刚开始还是能把DIV顺序打乱
现在没效果了