From 894de548c0dd78edd087c1a3b65ca6d9ef8536a7 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Wed, 31 Jan 2024 14:57:50 +0800
Subject: [PATCH] =?UTF-8?q?03=E7=AE=80=E5=8D=95=E7=9A=84=E5=A4=9A=E7=BB=84?=
 =?UTF-8?q?=E9=97=B4=E6=8B=96=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 03简单的多组间拖动.html | 89 +++++++++++++++++++++--------------------
 temp.js                 | 49 +++++++++++++++++++++++
 2 files changed, 95 insertions(+), 43 deletions(-)
 create mode 100644 temp.js

diff --git a/03简单的多组间拖动.html b/03简单的多组间拖动.html
index bb5b277..54125f9 100644
--- a/03简单的多组间拖动.html
+++ b/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>
 
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);