Vue.Draggable列表拖拽

本文參考自：https://blog.csdn.net/zjiang1994/article/details/79809687

 

 

 

安裝

npm install vuedraggable

引入

import draggable from 'vuedraggable'

基礎用法

定義一個json串 list，實現它的拖拽排序。

<template>
  <div>
    <!-- 調用組件  -->
    <draggable :disabled="disabled" v-model="list">
      <div class="draggable" v-for="item in list" :key="item.id">{{item.name}}</div>
    </draggable>
    <el-button @click="startDraggable">開始拖拽</el-button>
    <el-button @click="enddraggable">結束拖拽</el-button>
  </div>
</template>

<script>
// 引入拖拽組件
import draggable from 'vuedraggable'
export default {
  name: 'demo',
  components: {
    //調用組件
    draggable,
  },
  data () {
    return {
      disabled: false, // 切換拖拽
      list:[
        {id: 1, name: 'a'},
        {id: 2, name: 'b'},
        {id: 3, name: 'c'},
        {id: 4, name: 'd'},
        {id: 5, name: 'e'}
      ]
    }
  },
  methods: {
    // 開始拖拽
    startDraggable () {
      this.disabled = false;
    },
    // 結束拖拽
    enddraggable () {
      this.disabled = true;
    },
  }
}
</script>
<style scoped>
  .draggable {
    width: 100%;
    height: 2rem;
    background-color: #ededee;
    border-bottom: 1px solid gray;
  }
</style>