diff --git a/03简单的多组间拖动.html b/03简单的多组间拖动.html index bb5b277..54125f9 100644 --- a/03简单的多组间拖动.html +++ b/03简单的多组间拖动.html @@ -55,52 +55,55 @@
diff --git a/temp.js b/temp.js new file mode 100644 index 0000000..d539a51 --- /dev/null +++ b/temp.js @@ -0,0 +1,49 @@ +//第一组 +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 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 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);