sortableJS/temp.js

70 lines
2.3 KiB
JavaScript
Raw Normal View History

//第一组
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
//第二组
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
//第三组
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);