26088

packages/3.0.0/AppNavConfig/components/List.vue

@@ -8,11 +8,18 @@
           <el-button size="small" @click="save" v-if="isEdit">保存</el-button>
         </template>
         <div slot="content" class="item-wrapper">
-          <div class="item" v-for="(item, i) in picked" :key="i">
-            <img :src="item.pictureUrl">
-            <i class="el-icon-remove icon" @click="removeChoose(i)" v-if="isEdit"></i>
-            <h2>{{ item.name }}</h2>
-          </div>
+          <draggable
+            v-model="picked"
+            :animation="340"
+            group="select"
+            style="display: flex;"
+            handle=".mover">
+            <div class="item" :class="[isEdit ? 'mover' : '']" v-for="(item, i) in picked" :key="i">
+              <img :src="item.pictureUrl">
+              <i class="el-icon-remove icon" @click="removeChoose(i)" v-if="isEdit"></i>
+              <h2>{{ item.name }}</h2>
+            </div>
+          </draggable>
           <ai-empty style="width: 100%" v-if="!picked.length"></ai-empty>
         </div>
       </ai-card>
@@ -91,6 +98,7 @@
 </template>
 
 <script>
+  import draggable from 'vuedraggable'
   export default {
     name: 'List',
 
@@ -99,6 +107,10 @@
       dict: Object
     },
 
+    components: {
+      draggable
+    },
+
     data () {
       return {
         picked: [],