vuedraggable實現拖拽效果

工作中使用了基於vue的拖動組件vuedraggable，在這裏進行一些總結。

詳細的官網案例：https://www.npmjs.com/package/vuedraggable

1.簡單的拖動使用

<template>
    <div>
        <draggable @start="start" @end="end">
            <p v-for="d in list" :key="d.id">{{d.name}}</p>
        </draggable>
    </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
    components: {
        draggable
    },
    data() {
        return {
            list: [
                { name: "John", id: 1 },
                { name: "Joao", id: 2 },
                { name: "Jean", id: 3 },
                { name: "Gerard", id: 4 }
            ]
        }
    },
    methods: {
        start (e) {
            console.log(e)
        },
        end (e) {
            console.log(e)
        },
    }
}
</script>

先引用安裝好的vuedraggable插件，然後引入到該組件，即可使用draggable標籤，那麼該標籤下的p標籤就可以進行拖動排序。

其中的start,end事件是拖動開始和結束事件，需要注意一下幾個字段，表示的是拖動開始的下標和結束的下標位置。

可以利用其改動的下標進行排序
　　

2.固定其他位，進行某一位排序
　　在我的工作中需要進行某一位進行拖動排序，而其他不動，代碼如下：

<template>
    <div style="border: 1px solid #e8e8e8;width: 300px;">
        <draggable v-model="reportList" @end="endEvent" v-bind="dragOptions">
            <p v-for="r in reportList" :key="r.id" :class="r.active ? 'active' : 'disabled'">{{r.name}}</p>
        </draggable>
    </div>
</template>
<script>
import draggable from "vuedraggable"
export default {
    components: {
        draggable
    },
    data () {
        return {
            dragOptions: {
                animation: 500,
                filter: '.disabled'
            },
            reportList: [
                { id: 1, name: 'javascript', active: true},
                { id: 2, active: false, name:'css' },
                { id: 3, active: false, name: 'typescript' },
                { id: 4, active: false, name: 'vue.js' },
                { id: 5, active: false, name: 'nodejs' }
            ]
        }
    },
    methods: {
        endEvent () {
            console.log(this.reportList) // 自動更新reportList
        }
    }
}
</script>

此時，只有javascript那一欄可以拖動，其他欄爲禁止狀態，由dragOption中的filter實現過濾，並添加動畫效果

同時我還發現，其拖動結束後打印的list，竟然是排序後的結果，這樣真的很方便

3.複製拖動

初始狀態如上所示，我現在需要的是將左側按鈕內容拖動到右側，且左側依舊存在。代碼如下：

<template>
  <div style="height: 1000px;">
    <div style="float:left;width: 300px;">
    <!-- 左側按鈕 -->
      <draggable
        v-model="list1"
        draggable=".c-item"
        v-bind="dragOptions"
        :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}"
      >
        <div v-for="d in list1" :key="d.id" class="item c-item">{{d.name}}</div>
      </draggable>
    </div>
    <div style="float:right;width: 300px;">
    <!-- 右側按鈕 -->
      <draggable group="field" :list="list2" v-bind="dragOptions" @change="toChange">
        <div v-for="d in list2" :key="d.id" class="item">{{d.name}}</div>
      </draggable>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      dragOptions: { animation: 500 },
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 }
      ]
    };
  },
  methods: {
    toChange(e) {<br>　　　　　console.log(e)
        if (e.added) {
            console.log(this.list2)
        }
 
    }
  }
};
</script>

左側的draggable標籤添加了options配置項，

sort:false 表示拖動時禁止其進行排序操作

group: {name: ‘field’, pull: ‘clone’, put: false} 表示進行克隆拖動操作，並且該name和拖動的目標位置group名稱一致，如右側draggable標籤的group同樣爲field

draggable=".item" 將可拖動屬性下放到每一個按鈕下

右側接收的draggable標籤添加標識：group=“field”，同時含有change事件，可以返回添加各種事件，有興趣的可以查看官網。我這邊是添加事件

如下圖所示，拖動後返回add事件，並且打印的list 是排好序的list