js拖动排序
<!DOCTYPE html>
<html lang="en">
<head>
<title>js拖动给排序</title>
<meta charset="utf-8">
<title>拖动列表</title>
<script
src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>
<body>
<ul id="items">
<li>☰拖动 1</li>
<li>☰拖动 2</li>
<li>☰拖动 3</li>
</ul>
<div id="items2">
<div>☰div拖动 1</div>
<div>☰div拖动 2</div>
<div>☰div拖动 3</div>
</div>
<script type="text/javascript">
var el = document.getElementById('items');
var sortable = Sortable.create(el, {
animation : 150,
});
var el2 = document.getElementById('items2');
var sortable2 = Sortable.create(el2, {
animation : 150,
});
</script>
</body>
</html>鼠标按下，拖动排序
事件:onEnd当拖动结束后触发事件。
var el2 = document.getElementById('items2');
var sortable2 = Sortable.create(el2, {
animation : 150,
onChange: function(evt) {
//console.log("顺序发生了变更1:"+ evt.newIndex);
},
onEnd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
evt.to; // target list
evt.from; // previous list
evt.oldIndex; // element's old index within old parent
evt.newIndex; // element's new index within new parent
evt.clone // the clone element
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
console.log("顺序发生了变更2:"+ evt.newIndex);
var oldData=myArticlesData.myArticles[evt.oldIndex];
var newData=myArticlesData.myArticles[evt.newIndex];
//将两个数据交换位置
console.log("oldData:id="+oldData.id+",sort="+oldData.sort);
console.log("newData="+newData.id+",sort="+newData.sort);
var sortStr=oldData.id+"-"+newData.sort+","+newData.id+"-"+newData.sort;
console.log("排序内容sortStr=:"+sortStr);
var url = myjs.project.projectDomainName() + "/articleType/sort.shtml";
$.ajax({
url : url,
type : "post",
data : {
"sortStr" : sortStr
},
beforeSend : function() {
this.layerIndex = layer.load(0, {
shade : [ 0.5, '#393D49' ]
});
},
success : function(result) {
result = eval('(' + result + ')');
console.log(result);
if (result.code == '200') {
} else {
layer.msg("操作失败", {
icon : 6
});//失败的表情
}
},
complete : function() {
layer.close(this.layerIndex);
},
});
},
});