排序拖拽和序号位置

package.json

@@ -31,6 +31,7 @@
     "vue-axios": "^2.1.2",
     "vue-i18n": "^8.7.0",
     "vue-router": "^3.0.1",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

src/components/WbsTree/ManualSorting.vue

@@ -3,37 +3,44 @@
     class="ManualSorting"
     style="border: 1px solid #E8E8E8;border-radius: 3px;"
   >
-    <div
-      v-for="(item,key) in sort"
-      :key="key"
-      class="flexBetween flexItemsC"
-      style="width:100%;font-size:16px;height:30px;padding:3px 0px;border-top: 1px solid  #E8E8E8;"
-    >
-      <div>
-        <span
-          class="marleft10"
-          style="color:black;"
-        >{{item.deptName}}</span>
-        <span>{{key+1}}</span>
-        <span class="marleft20">{{item.tableName}}</span>
+    <draggable v-model="sort">
+      <div
+        v-for="(item,key) in sort"
+        :key="key"
+        class="flexBetween flexItemsC"
+        style="width:100%;font-size:16px;height:30px;padding:3px 0px;border-top: 1px solid  #E8E8E8;"
+      >
+        <div>
+          <span class="marleft10 marright20">{{key+1}}</span>
+          <span
+            style="color:black;"
+          >{{item.deptName}}</span>
+          <span class="marleft20">{{item.tableName}}</span>
+        </div>
+        <div class="flexItemsC marright20">
+          <i
+            @click="shangshen(key)"
+            class="el-icon-top"
+            :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
+          ></i>
+          <i
+            @click="xiajiang(key)"
+            class="el-icon-bottom marleft5"
+            :style="{'font-size':'20px','color':key==sort.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=sort.length-1?'pointer':'default'}"
+          ></i>
+        </div>
       </div>
-      <div class="flexItemsC marright20">
-        <i
-          @click="shangshen(key)"
-          class="el-icon-top"
-          :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
-        ></i>
-        <i
-          @click="xiajiang(key)"
-          class="el-icon-bottom marleft5"
-          :style="{'font-size':'20px','color':key==sort.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=sort.length-1?'pointer':'default'}"
-        ></i>
-      </div>
-    </div>
+    </draggable>
   </div>
 </template>
 <script>
+
+import draggable from 'vuedraggable'
+
 export default {
+  components: {
+      draggable,
+  },
   props: ['sort'],
   methods: {
     xiajiang (key) {