测试拖拽框架

ruoyi-ui/package.json

@@ -67,7 +67,7 @@
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vue-timeago": "^5.1.2",
-    "vuedraggable": "2.20.0",
+    "vuedraggable": "^2.20.0",
     "vuex": "3.1.0"
   },
   "devDependencies": {

ruoyi-ui/src/main.js

@@ -27,6 +27,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 //媒体查詢
 import '@/assets/styles/base.css'
 
+// 引入
+import draggable from "vuedraggable";
+
 // 全局引入VueMaterial组件库 https://vuematerial.io/
 // import VueMaterial from 'vue-material'
 // import 'vue-material/dist/vue-material.min.css'
@@ -90,3 +93,4 @@ new Vue({
   store,
   render: h => h(App)
 })
+

ruoyi-ui/src/router/index.js

@@ -127,6 +127,14 @@ export const constantRoutes = [
     path: '/daohang',
     component: resolve => require(['../views/bookmark/menu/index.vue'], resolve),
     hidden: true,
+  },{
+    path: '/draggable',
+    component: resolve => require(['../views/bookmark/vuedraggable/index.vue'], resolve),
+    hidden: true,
+  },{
+    path: '/draggable2',
+    component: resolve => require(['../views/bookmark/vuedraggable/index2.vue'], resolve),
+    hidden: true,
   },
   {
     path: '/login',

ruoyi-ui/src/views/bookmark/infra/nested.vue

@@ -0,0 +1,37 @@
+<template>
+  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
+    <li v-for="el in tasks" :key="el.name">
+      <p>{{ el.name }}</p>
+<!--      <nested-draggable :tasks="el.tasks" />-->
+
+      <draggable :list="el.tasks" tag="ul" group="g2">
+    <li v-for="el in el.tasks" :key="el.name">
+      <p>{{ el.name }}</p>
+    </li>
+  </draggable>
+
+
+    </li>
+  </draggable>
+</template>
+<script>
+  import draggable from "vuedraggable";
+  export default {
+    props: {
+      tasks: {
+        required: true,
+        type: Array
+      }
+    },
+    components: {
+      draggable
+    },
+    name: "nested-draggable"
+  };
+</script>
+<style scoped>
+  .dragArea {
+    min-height: 50px;
+    outline: 1px dashed;
+  }
+</style>

ruoyi-ui/src/views/bookmark/vuedraggable/index2.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="row">
+    <div class="col-8">
+      <h3>Nested draggable</h3>
+      <nested-draggable :tasks="list" />
+    </div>
+
+    <rawDisplayer class="col-3" :value="list" title="List" />
+  </div>
+</template>
+
+<script>
+  import nestedDraggable from "../infra/nested";
+  export default {
+    name: "nested-example",
+    display: "Nested",
+    order: 15,
+    components: {
+      nestedDraggable
+    },
+    data() {
+      return {
+        list: [
+          {
+            name: "task 1",
+            tasks: [
+              {
+                name: "task 2",
+                tasks: []
+              }
+            ]
+          },
+          {
+            name: "task 3",
+            tasks: [
+              {
+                name: "task 4",
+                tasks: []
+              }
+            ]
+          },
+          {
+            name: "task 5",
+            tasks: []
+          }
+        ]
+      };
+    }
+  };
+</script>
+<style scoped></style>