sortable.js onSort 拖拽位置发生改变的事件,比如有两个拖拽组a和b,你无论是a组内拖拽排序还是从a组拖往b组都会触发onSort,而onUpdate事件只会发生在a组或者b组元素被增加或者减少时才会执行。
属性名称 | 类型 | 说明 |
---|---|---|
onSort | function | 拖拽位置发生改变的事件 |
//选中回调函数,evt为参数,要查看evt对象属性请在谷歌浏览器按F12,然后再控制台(console选项卡)查看
//获取对象
var el = document.getElementById('g1');
//设置配置
var ops1 = {
group:'itxst.com',
animation: 1000,
draggable: ".item",
direction: 'vertical',
forceFallback:true,
//********* 拖拽“中”位置改变的回调事件 *********
onSort: function (evt) {
console.log(evt);
var index=evt.oldIndex;
var arr = sortable1.toArray();
document.getElementById("msg1").innerHTML = "a onSort新的顺序是:" + JSON.stringify(arr);
},
//********* 拖拽“后”位置改变的回调事件 *********
onUpdate: function (evt) {
console.log(evt);
var index=evt.oldIndex;
var arr = sortable1.toArray();
document.getElementById("msg2").innerHTML = "a onUpdate新的顺序是:" + JSON.stringify(arr);
}
};
//初始化
var sortable1 = Sortable.create(el, ops1);
代码例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sortable.js onSort事件例子</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
<style>
.itxst {
margin: 10px;
width: 40%;
float: left;
}
.itxst div {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
.msg {
clear: both;
}
</style>
</head>
<body>
<span>把a组元素往b组拖拽试试看</span>
<div>
<div id="g1" class="itxst">
<div class="item" data-id="a1">item a1</div>
<div class="item" data-id="a2">item a2</div>
<div class="item" data-id="a3">item a3</div>
</div>
<div id="g2" class="itxst">
<div class="item" data-id="b1">item b1</div>
<div class="item" data-id="b2">item b2</div>
<div class="item" data-id="b3">item b3</div>
</div>
</div>
<div id="msg1" class="msg"></div>
<div id="msg2" class="msg"></div>
<script>
//获取对象
var el = document.getElementById('g1');
//设置配置
var ops1 = {
group: 'itxst.com',
animation: 1000,
draggable: ".item",
direction: 'vertical',
forceFallback: true,
//********* 拖拽位置发生改变的事件件 *********
onSort: function (evt) {
console.log(evt);
var index = evt.oldIndex;
var arr = sortable1.toArray();
document.getElementById("msg1").innerHTML = "a onSort新的顺序是:" + JSON.stringify(arr);
},
//********* 元素被增加或者减少时才会执行的回调事件 *********
onUpdate: function (evt) {
console.log(evt);
var index = evt.oldIndex;
var arr = sortable1.toArray();
document.getElementById("msg2").innerHTML = "a onUpdate新的顺序是:" + JSON.stringify(arr);
}
};
//初始化
var sortable1 = Sortable.create(el, ops1);
//获取对象
var e2 = document.getElementById('g2');
//设置配置
var ops2 = {
group: 'itxst.com',
animation: 1000,
draggable: ".item",
direction: 'vertical',
forceFallback: true,
//********* 拖拽“中”位置改变的回调事件 *********
onSort: function (evt) {
console.log(evt);
var index = evt.oldIndex;
var arr = sortable2.toArray();
document.getElementById("msg1").innerHTML = "b onSort新的顺序是:" + JSON.stringify(arr);
},
//********* 拖拽“后”位置改变的回调事件 *********
onUpdate: function (evt) {
console.log(evt);
var index = evt.oldIndex;
var arr = sortable2.toArray();
document.getElementById("msg2").innerHTML = "b onUpdate新的顺序是:" + JSON.stringify(arr);
}
};
//初始化
var sortable2 = Sortable.create(e2, ops2);
</script>
</body>
</html>