diff --git a/package.json b/package.json
index f7e0f63..4d9efa9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "prettier": "^3.2.5",
+    "sortablejs": "^1.15.2",
     "tdesign-vue-next": "^1.9.3",
     "vite-plugin-mock": "^3.0.1",
     "vue": "^3.4.21",
diff --git a/src/layout/components/LayoutAside.vue b/src/layout/components/LayoutAside.vue
index 5ee21e2..4b6e2af 100644
--- a/src/layout/components/LayoutAside.vue
+++ b/src/layout/components/LayoutAside.vue
@@ -37,6 +37,9 @@
         <t-menu-item value="2-8" to="/Bill/BillDraw">
           <span>票据列表</span>
         </t-menu-item>
+        <t-menu-item value="2-9" to="/Bill/drag">
+          <span>拖拽效果</span>
+        </t-menu-item>
       </t-submenu>
       <t-submenu value="3" title="应收款管理">
         <template #icon>
diff --git a/src/pages/finance-bill-manage/components/DoubleBox.vue b/src/pages/finance-bill-manage/components/DoubleBox.vue
new file mode 100644
index 0000000..5fb25cf
--- /dev/null
+++ b/src/pages/finance-bill-manage/components/DoubleBox.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="double-box">double-box</div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.double-box {
+  width: 186px;
+  height: 180px;
+  background-color: rgb(8, 48, 139);
+}
+</style>
diff --git a/src/pages/finance-bill-manage/components/TextVue.vue b/src/pages/finance-bill-manage/components/TextVue.vue
new file mode 100644
index 0000000..0de0ecd
--- /dev/null
+++ b/src/pages/finance-bill-manage/components/TextVue.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="little-box">little-box</div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.little-box {
+  width: 75px;
+  height: 75px;
+  background-color: greenyellow;
+}
+</style>
diff --git a/src/pages/finance-bill-manage/drag.vue b/src/pages/finance-bill-manage/drag.vue
new file mode 100644
index 0000000..ea110a2
--- /dev/null
+++ b/src/pages/finance-bill-manage/drag.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="grid">
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <!-- <DoubleBox class="grid-double grid-item-lm" /> -->
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import Sortable from "sortablejs";
+import TextVue from "./components/TextVue.vue";
+import DoubleBox from "./components/DoubleBox.vue";
+
+//使用onMounted是因为要等到标签渲染完成后在querySelector才能获取到带有grid类名的div盒子，否则grid常量为null，报错。
+onMounted(() => {
+  const grid = document.querySelector(".grid");
+
+  //sortable对象
+  new Sortable(grid, {
+    animation: 150,
+    handle: ".grid-item-lm", //对grid的子对象中，带有.grid-item启动拖拽效果
+  });
+});
+</script>
+
+<style scoped>
+.grid {
+  padding: 20px 10%;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  /*  声明列的高度  */
+  grid-template-columns: repeat(auto-fill, 75px);
+  /*  声明行的高度  */
+  grid-template-rows: repeat(auto-fill, 75px);
+  /*  声明行间距和列间距  */
+  grid-gap: 36px;
+}
+
+.grid-div {
+  /*  声明宽占4个小盒子  */
+  grid-column: span 1;
+  /*  声明高占2个小盒子  */
+  grid-row: span 1;
+}
+
+.grid-double {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+</style>
diff --git a/src/router/modules/financeBillManage.js b/src/router/modules/financeBillManage.js
index 355bc5e..69676b1 100644
--- a/src/router/modules/financeBillManage.js
+++ b/src/router/modules/financeBillManage.js
@@ -7,6 +7,7 @@ import BillBreakagekURL from "@/pages/finance-bill-manage/billBreakage.vue";
 import BillDestroyURL from "@/pages/finance-bill-manage/billDestroy.vue";
 import DetailReportURL from "@/pages/finance-bill-manage/detailReport.vue";
 import BillDrawURL from "@/pages/finance-bill-manage/billDraw.vue";
+import dragUrl from "@/pages/finance-bill-manage/drag.vue";
 
 const financeBillManage = [
   {
@@ -79,6 +80,14 @@ const financeBillManage = [
           title: "报表明细",
         },
       },
+      {
+        path: "drag",
+        name: "drag",
+        component: dragUrl,
+        meta: {
+          title: "拖拽效果",
+        },
+      },
     ],
   },
 ];