diff --git a/04sortable.js group属性自定义函数控制是否允许拖拽例子.html b/04sortable.js group属性自定义函数控制是否允许拖拽例子.html new file mode 100644 index 0000000..6149f25 --- /dev/null +++ b/04sortable.js group属性自定义函数控制是否允许拖拽例子.html @@ -0,0 +1,129 @@ + + + + + + sortable.js group属性自定义函数控制是否允许拖拽例子 + + + + + + +
+
+
A组
+
item 1
+
item 2(不允许被拖到B组)
+
item 3
+
+
+
B组
+
www.itxst.com
+
google.com(不允许被拖到A组)
+
www.baidu.com
+
+
+
C组
+
杭州
+
山景城
+
北京
+
+
+
+ + + + \ No newline at end of file diff --git a/temp.js b/temp.js index d539a51..ed2a34b 100644 --- a/temp.js +++ b/temp.js @@ -1,49 +1,70 @@ -//第一组 -var g1 = document.getElementById('g1'); -var ops1 = { - animation: 1000, - draggable: '.item', - sort: false, // 控制是否可以拖拽排序 - group: 'itxst.com', - //拖动结束 - onEnd: function (evt) { - console.log(evt); - //获取拖动后的排序 - var arr = sortable1.toArray(); - document.getElementById('msg').innerHTML = 'A组排序结果：' + JSON.stringify(arr); - }, -}; -var sortable1 = Sortable.create(g1, ops1); + //第一组 + 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); -//第二组 -var g2 = document.getElementById('g2'); -var ops2 = { - animation: 1000, - draggable: '.item', - sort: true, - group: 'itxst.com', - //拖动结束 - onEnd: function (evt) { - console.log(evt); - //获取拖动后的排序 - var arr = sortable2.toArray(); - document.getElementById('msg').innerHTML = 'B组排序结果：' + JSON.stringify(arr); - }, -}; -var sortable2 = Sortable.create(g2, ops2); + //第二组 + 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); -//第三组 -var g3 = document.getElementById('g3'); -var ops3 = { - animation: 1000, - draggable: '.item', - group: 'itxst.com', - //拖动结束 - onEnd: function (evt) { - console.log(evt); - //获取拖动后的排序 - var arr = sortable3.toArray(); - document.getElementById('msg').innerHTML = 'C组排序结果：' + JSON.stringify(arr); - }, -}; -var sortable3 = Sortable.create(g3, ops3); + //第三组 + 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); \ No newline at end of file