From 5fbf82d480fc488d57c1d72656c9953e9bad99d8 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Wed, 31 Jan 2024 14:37:20 +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

---
 01简单拖动表格.html     |  87 ++++++++++++++++++++++++++++++++
 02表格拖动例子.html     |  85 +++++++++++++++++++++++++++++++
 03简单的多组间拖动.html | 107 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 279 insertions(+)
 create mode 100644 01简单拖动表格.html
 create mode 100644 02表格拖动例子.html
 create mode 100644 03简单的多组间拖动.html
diff --git a/01简单拖动表格.html b/01简单拖动表格.html
new file mode 100644
index 0000000..16123e9
--- /dev/null
+++ b/01简单拖动表格.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>sortable.js table表格拖拽例子</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"
+    />
+    <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
+    <style>
+      table {
+        border-collapse: collapse;
+        margin: 0 auto;
+        text-align: center;
+        width: 90%;
+      }
+
+      table td,
+      table th {
+        border: 1px solid #cad9ea;
+        color: #666;
+        height: 30px;
+      }
+
+      table thead th {
+        background-color: #cce8eb;
+      }
+
+      table tr:nth-child(odd) {
+        background: #fff;
+      }
+
+      table tr:nth-child(even) {
+        background: #f5fafa;
+      }
+    </style>
+  </head>
+  <body>
+    <table id="itxst">
+      <tbody data-id="1">
+        <tr>
+          <td>1</td>
+          <td>www.baidu.com</td>
+        </tr>
+      </tbody>
+      <tbody data-id="2">
+        <tr>
+          <td>2</td>
+          <td>www.itxst.com</td>
+        </tr>
+      </tbody>
+      <tbody data-id="3">
+        <tr>
+          <td>3</td>
+          <td>www.google.com</td>
+        </tr>
+      </tbody>
+      <tbody data-id="4">
+        <tr>
+          <td>4</td>
+          <td>www.microsoft.com</td>
+        </tr>
+      </tbody>
+    </table>
+    <script>
+      //获取对象
+      var el = document.getElementById('itxst');
+      Sortable.create(el, {
+        animation: 100,
+      });
+      // //设置配置
+      // var ops = {
+      //     animation: 1000,
+      //     //拖动结束
+      //     onEnd: function (evt) {
+      //         console.log(evt);
+      //         //获取拖动后的排序
+      //         var arr = sortable.toArray();
+      //         alert(JSON.stringify(arr));
+      //     }
+      // };
+      // //初始化
+      // var sortable = Sortable.create(el, ops);
+    </script>
+  </body>
+</html>
diff --git a/02表格拖动例子.html b/02表格拖动例子.html
new file mode 100644
index 0000000..6391cfa
--- /dev/null
+++ b/02表格拖动例子.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>sortable.js table表格拖拽例子</title>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+    <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
+    <style>
+        table {
+            border-collapse: collapse;
+            margin: 0 auto;
+            text-align: center;
+            width: 90%;
+        }
+
+        table td,
+        table th {
+            border: 1px solid #cad9ea;
+            color: #666;
+            height: 30px;
+        }
+
+        table thead th {
+            background-color: #CCE8EB;
+        }
+
+        table tr:nth-child(odd) {
+            background: #fff;
+        }
+
+        table tr:nth-child(even) {
+            background: #F5FAFA;
+        }
+    </style>
+</head>
+
+<body>
+    <table id="itxst">
+        <tbody data-id="1">
+            <tr>
+                <td>1</td>
+                <td>www.baidu.com</td>
+            </tr>
+        </tbody>
+        <tbody data-id="2">
+            <tr>
+                <td>2</td>
+                <td>www.itxst.com</td>
+            </tr>
+        </tbody>
+        <tbody data-id="3">
+            <tr>
+                <td>3</td>
+                <td>www.google.com</td>
+            </tr>
+        </tbody>
+        <tbody data-id="4">
+            <tr>
+                <td>4</td>
+                <td>www.microsoft.com</td>
+            </tr>
+        </tbody>
+    </table>
+    <script>
+        // 每个元素 tr 需要在外面加上 tbody 才能对元素有效
+        //获取对象
+        var el = document.getElementById('itxst');
+        //设置配置
+        var ops = {
+            animation: 1000,
+            //拖动结束
+            onEnd: function (evt) {
+                //获取拖动后的排序
+                var arr = sortable.toArray();
+                console.log(JSON.stringify(arr));
+            }
+        };
+        //初始化
+        var sortable = Sortable.create(el, ops);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/03简单的多组间拖动.html b/03简单的多组间拖动.html
new file mode 100644
index 0000000..bb5b277
--- /dev/null
+++ b/03简单的多组间拖动.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>sortable.js group属性例子</title>
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+    <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
+    <style>
+        .box {}
+
+        .itxst {
+            margin: 10px auto;
+            width: 30%;
+            float: left;
+            margin-right: 10px;
+        }
+
+        .itxst div {
+            padding: 6px;
+            background-color: #fdfdfd;
+            border: solid 1px #eee;
+            margin-bottom: 10px;
+            cursor: move;
+        }
+
+        #msg {
+            clear: both;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box">
+        <div id="g1" class="itxst">
+            <div>A组</div>
+            <div class="item" data-id="1">item 1</div>
+            <div class="item" data-id="2">item 2</div>
+            <div class="item" data-id="3">item 3</div>
+        </div>
+        <div id="g2" class="itxst">
+            <div>B组</div>
+            <div class="item" data-id="4">www.itxst.com</div>
+            <div class="item" data-id="5">www.google.com</div>
+            <div class="item" data-id="6">www.baidu.com</div>
+        </div>
+        <div id="g3" class="itxst">
+            <div>C组</div>
+            <div class="item" data-id="7">杭州</div>
+            <div class="item" data-id="8">山景城</div>
+            <div class="item" data-id="9">北京</div>
+        </div>
+    </div>
+    <div id="msg"></div>
+    <script>
+        //第一组
+        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: 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);
+    </script>
+</body>
+
+</html>
\ No newline at end of file

1	www.baidu.com
2	www.itxst.com
3	www.google.com
4	www.microsoft.com