添加菜谱步骤列表拖拽

package.json

@@ -24,7 +24,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "sortablejs": "1.12.0",
+    "sortablejs": "^1.14.0",
     "vue": "2.6.10",
     "vue-qr": "^2.3.0",
     "vue-router": "3.0.6",

src/styles/index.css

@@ -354,3 +354,9 @@ div:focus {
   vertical-align: middle;
   margin-bottom: 10px;
 }
+
+.sortable-ghost {
+  opacity: .8;
+  color: #fff !important;
+  background: #42b983 !important;
+}

src/styles/index.scss

@@ -74,4 +74,11 @@ div:focus {
     vertical-align: middle;
     margin-bottom: 10px;
   }
+}
+
+// sortable-ghost
+.sortable-ghost{
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
 }

src/views/recipe/step.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="app-container">
-    <el-button
-      class="filter-item"
-      style="margin-left: 10px;"
-      type="primary"
-      @click="handleCreateOrUpdate('create')"
-    >
-      添加
-    </el-button>
-
+    <div class="filter-container">
+      <el-button
+        class="filter-item"
+        type="primary"
+        @click="handleCreateOrUpdate('create')"
+      >
+        添加
+      </el-button>
+    </div>
     <el-table
+      ref="dragTable"
       :key="0"
       v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
-      style="width: 60%;margin-top: 10px"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
       <el-table-column label="内容" align="center">
@@ -29,6 +29,11 @@
           <el-image v-if="row.stepPic" style="width: 180px; height: 100px" :src="row.stepPic" fit="contain" />
         </template>
       </el-table-column>
+      <el-table-column align="center" label="Drag" width="80">
+        <template slot-scope="{}">
+          <svg-icon class="drag-handler" icon-class="drag" />
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding">
         <template slot-scope="{row}">
           <el-button size="mini" type="primary" @click="handleCreateOrUpdate('edit', row)">
@@ -69,6 +74,7 @@
 </template>
 
 <script>
+import Sortable from 'sortablejs'
 import SingleImage from '@/components/Upload/SingleImage'
 import { addRecipeStep, updateRecipeStep, removeRecipeStep, getRecipeSteps, updateRecipeStepSort } from '@/api/recipe'
 
@@ -84,13 +90,27 @@ export default {
       textMap: { 'create': '新建', 'edit': '更新' },
       dialogStatus: '',
       dialogFormVisible: false,
-      rules: {}
+      rules: {},
+      sortable: ''
     }
   },
   created() {
     this.recipeId = this.$route.params && this.$route.params.id
     this.fetchData()
   },
+  mounted() {
+    const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+    this.sortable = Sortable.create(el, {
+      animation: 150,
+      ghostClass: 'sortable-ghost',
+      // ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+      setData: function(dataTransfer) {
+
+      },
+      onEnd: evt => {
+      }
+    })
+  },
   methods: {
     fetchData() {
       this.listLoading = true

yarn.lock

@@ -2086,9 +2086,9 @@ babel-core@^7.0.0-bridge.0:
   resolved "https://registry.nlark.com/babel-core/download/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha1-laSS3dkPm06aSh2hTrM1uHtjTs4=
 
-babel-eslint@10.1.0:
+babel-eslint@10.1.¬0:
   version "10.1.0"
-  resolved "https://registry.nlark.com/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611946213770&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
   integrity sha1-aWjlaKkQt4+zd5zdi2rC9HmUMjI=
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -9572,10 +9572,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-sortablejs@1.12.0:
-  version "1.12.0"
-  resolved "https://registry.nlark.com/sortablejs/download/sortablejs-1.12.0.tgz#ee6d7ece3598c2af0feb1559d98595e5ea37cbd6"
-  integrity sha1-7m1+zjWYwq8P6xVZ2YWV5eo3y9Y=
+sortablejs@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.nlark.com/sortablejs/download/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha1-bS4XzL2yX0ZHNN9iHU811Ks1s9g=
 
 source-list-map@^2.0.0:
   version "2.0.1"