03简单的多组间拖动

03简单的多组间拖动.html

@@ -55,52 +55,55 @@
     </div>
     <div id="msg"></div>
     <script>
+        /**
+         * group：可以设置不同组之间不允许拖拽
+         * 如果元素属于A组，在这里设置了group那么它就只能被拖拽到A组
+         * 如果这个元素属于B组，那么这个元素只能被拖拽到B组
+         * */
+
         // 第一组
-        var g1 = document.getElementById('g1');
+        const g1 = document.getElementById("g1");
-        var ops1 = {
+        const ops1 = {
             animation: 1000,
-            draggable: ".item",
+            graggable: ".item",// 可以被拖拽的元素
-            sort: false,
+            sort: false,// 不允许排序
-            group: 'itxst.com',
+            group: "bunny",// 所属分组，如果不是这个分组的不可以拖拽到这个分组
-            //拖动结束
+            onEnd(event) {
-            onEnd: function (evt) {
+                const arr = sortable1.toArray();
-                console.log(evt);
+                console.log(arr);
-                //获取拖动后的排序
+            }
-                var arr = sortable1.toArray();
+        }
-                document.getElementById("msg").innerHTML = "A组排序结果：" + JSON.stringify(arr);
+
-            },
+        const sortable1 = Sortable.create(g1, ops1)
-        };
+
-        var sortable1 = Sortable.create(g1, ops1);
         // 第二组
-        var g2 = document.getElementById('g2');
+        const g2 = document.getElementById("g2")
-        var ops2 = {
+        const ops2 = {
             animation: 1000,
-            draggable: ".item",
+            graggable: ".item",
             sort: false,
-            group: 'itxst.com',
+            group: "bunny",
-            //拖动结束
+            onEnd() {
-            onEnd: function (evt) {
+                const arr = sortable2.toArray()
-                console.log(evt);
+                console.log(arguments);
-                //获取拖动后的排序
+            }
-                var arr = sortable2.toArray();
+        }
-                document.getElementById("msg").innerHTML = "B组排序结果：" + JSON.stringify(arr);
+
-            },
+        const sortable2 = Sortable.create(g2, ops2)
-        };
+
-        var sortable2 = Sortable.create(g2, ops2);
         // 第三组
-        var g3 = document.getElementById('g3');
+        const g3 = document.getElementById("g3")
-        var ops3 = {
+        const ops3 = {
             animation: 1000,
-            draggable: ".item",
+            graggable: ".item",
-            //拖动结束
+            sort: "bunny",
-            onEnd: function (evt) {
+            onEnd() {
-                console.log(evt);
+                const arr = sortable3.toArray()
-                //获取拖动后的排序
+                console.log(arr)
-                var arr = sortable3.toArray();
+            }
-                document.getElementById("msg").innerHTML = "C组排序结果：" + JSON.stringify(arr);
+        }
-            },
+
-        };
+        const sortable3 = Sortable.create(g3, ops3)
-        var sortable3 = Sortable.create(g3, ops3);
     </script>
 </body>
 

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);