03简单的多组间拖动

03简单的多组间拖动.html

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