2024-01-31 16:03:16 +08:00
|
|
|
|
//第一组
|
|
|
|
|
var moveItemId = -1;
|
|
|
|
|
var g1 = document.getElementById('g1');
|
|
|
|
|
var ops1 = {
|
|
|
|
|
animation: 166,
|
|
|
|
|
draggable: ".item",
|
|
|
|
|
sort: true,
|
|
|
|
|
group: {
|
|
|
|
|
name: "itxst.com",
|
|
|
|
|
pull: function () {
|
|
|
|
|
//第二个元素不允许被拖走
|
|
|
|
|
if (moveItemId == '2') return false;
|
|
|
|
|
return 'clone';
|
|
|
|
|
},
|
|
|
|
|
put: function () {
|
|
|
|
|
//B组的google不允许被拖入
|
|
|
|
|
if (moveItemId == '5') return false;
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//开始拖动记录下用户点击的那个元素
|
|
|
|
|
onStart: function (evt) {
|
|
|
|
|
moveItemId = evt.clone.dataset.id;
|
|
|
|
|
},
|
|
|
|
|
//拖动结束
|
|
|
|
|
onEnd: function (evt) {
|
|
|
|
|
console.log(evt);
|
|
|
|
|
//获取拖动后的排序
|
|
|
|
|
var arr = sortable1.toArray();
|
|
|
|
|
document.getElementById("msg").innerHTML = "A组排序结果:" + JSON.stringify(arr);
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
var sortable1 = Sortable.create(g1, ops1);
|
2024-01-31 14:57:50 +08:00
|
|
|
|
|
2024-01-31 16:03:16 +08:00
|
|
|
|
//第二组
|
|
|
|
|
var g2 = document.getElementById('g2');
|
|
|
|
|
var ops2 = {
|
|
|
|
|
animation: 166,
|
|
|
|
|
draggable: ".item",
|
|
|
|
|
sort: false,
|
|
|
|
|
group: { name: "itxst.com", pull: true, put: true },
|
|
|
|
|
//开始拖动记录下用户点击的那个元素
|
|
|
|
|
onStart: function (evt) {
|
|
|
|
|
moveItemId = evt.clone.dataset.id;
|
|
|
|
|
},
|
|
|
|
|
//拖动结束
|
|
|
|
|
onEnd: function (evt) {
|
|
|
|
|
console.log(evt);
|
|
|
|
|
//获取拖动后的排序
|
|
|
|
|
var arr = sortable2.toArray();
|
|
|
|
|
document.getElementById("msg").innerHTML = "B组排序结果:" + JSON.stringify(arr);
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
var sortable2 = Sortable.create(g2, ops2);
|
2024-01-31 14:57:50 +08:00
|
|
|
|
|
2024-01-31 16:03:16 +08:00
|
|
|
|
//第三组
|
|
|
|
|
var g3 = document.getElementById('g3');
|
|
|
|
|
var ops3 = {
|
|
|
|
|
animation: 166,
|
|
|
|
|
draggable: ".item",
|
|
|
|
|
group: { name: "itxst.com", pull: true, put: true },
|
|
|
|
|
//拖动结束
|
|
|
|
|
onEnd: function (evt) {
|
|
|
|
|
console.log(evt);
|
|
|
|
|
//获取拖动后的排序
|
|
|
|
|
var arr = sortable3.toArray();
|
|
|
|
|
document.getElementById("msg").innerHTML = "C组排序结果:" + JSON.stringify(arr);
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
var sortable3 = Sortable.create(g3, ops3);
|