食谱步骤handler

src/icons/svg/drag.svg

@@ -0,0 +1 @@
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M73.137 29.08h-9.209 29.7L63.886.093 34.373 29.08h20.49v27.035H27.238v17.948h27.625v27.133h18.274V74.063h27.41V56.115h-27.41V29.08zm-9.245 98.827l27.518-26.711H36.59l27.302 26.71zM.042 64.982l27.196 27.029V38.167L.042 64.982zm100.505-26.815V92.01l27.41-27.029-27.41-26.815z"/></svg>

src/views/recipe/step.vue

@@ -29,22 +29,22 @@
           <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">
+      <el-table-column align="center" label="Drag" width="80" class-name="drag-handler-col">
         <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">
+      <el-table-column label="操作" align="center" class-name="small-padding" width="200">
         <template slot-scope="{row}">
           <el-button size="mini" type="primary" @click="handleCreateOrUpdate('edit', row)">
             更新
           </el-button>
-          <el-button size="mini" type="primary" @click="updateSort(row, 0)">
+          <!-- <el-button size="mini" type="primary" @click="updateSort(row, 0)">
             上移
           </el-button>
           <el-button size="mini" type="primary" @click="updateSort(row, 1)">
             下移
-          </el-button>
+          </el-button> -->
           <el-button size="mini" type="danger" @click="handleDelete(row)">
             删除
           </el-button>
@@ -103,6 +103,7 @@ export default {
     this.sortable = Sortable.create(el, {
       animation: 150,
       ghostClass: 'sortable-ghost',
+      handle: '.drag-handler-col', // handle's class
       // ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
       setData: function(dataTransfer) {