Vue-draggable是一個(gè)基于Vue.js的可拖拽組件庫，可以方便地實(shí)現(xiàn)拖拽排序、拖拽交換等功能。

安裝

首先需要安裝vue-draggable組件庫。可以通過npm進(jìn)行安裝：

npm install vuedraggable --save

使用

1. 引入組件

在vue組件中引入vuedraggable組件：

import draggable from 'vuedraggable'

2. 注冊(cè)組件

在vue組件中注冊(cè)draggable組件：

export default {
  components: {
    draggable
  }
}

3. 使用組件

在vue模板中使用draggable組件：

<draggable v-model="list" :options="dragOptions">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

參數(shù)配置

在使用draggable組件時(shí)，可以傳遞一些參數(shù)進(jìn)行配置。下面是一些常用的參數(shù)：

1. v-model

v-model用于綁定數(shù)據(jù)，它綁定的是一個(gè)數(shù)組，這個(gè)數(shù)組就是我們需要排序的數(shù)據(jù)。例如：

data () {
  return {
    list: [
      {id: 1, name: 'item1'},
      {id: 2, name: 'item2'},
      {id: 3, name: 'item3'}
    ]
  }
}

2. options

options是一個(gè)對(duì)象，用于配置draggable組件的行為。下面是一些常用的配置：

dragOptions: {
  animation: 200, // 動(dòng)畫時(shí)間，單位毫秒
  group: 'items', // 分組，同一分組內(nèi)的元素可以互相拖拽
  disabled: false, // 是否禁用拖拽功能
  ghostClass: 'ghost', // 拖拽過程中占位元素的class名稱
  handle: '.handle', // 拖拽手柄，只有拖拽手柄內(nèi)的元素才能被拖拽
  sort: true, // 是否啟用排序功能
  draggable: '.item', // 可拖拽元素的選擇器
  filter: '.ignore' // 不可拖拽元素的選擇器
}

3. events

draggable組件還提供了一些事件，可以在事件回調(diào)函數(shù)中處理一些邏輯。下面是一些常用的事件：

methods: {
  onEnd (evt) { // 拖拽結(jié)束時(shí)觸發(fā)
    console.log('onEnd', evt)
  },
  onMove (evt) { // 拖拽過程中觸發(fā)
    console.log('onMove', evt)
  },
  onStart (evt) { // 開始拖拽時(shí)觸發(fā)
    console.log('onStart', evt)
  }
}

完整示例

下面是一個(gè)完整的示例：文章來源地址http://www.zghlxwxcb.cn/news/detail-486692.html

<template>
  <div>
    <h1>Vue Draggable Example</h1>
    <draggable v-model="list" :options="dragOptions" @end="onEnd" @move="onMove" @start="onStart">
      <div v-for="item in list" :key="item.id" class="item">
        <span class="handle">?</span>{{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      list: [
        {id: 1, name: 'item1'},
        {id: 2, name: 'item2'},
        {id: 3, name: 'item3'}
      ],
      dragOptions: {
        animation: 200,
        group: 'items',
        disabled: false,
        ghostClass: 'ghost',
        handle: '.handle',
        sort: true,
        draggable: '.item',
        filter: '.ignore'
      }
    }
  },
  methods: {
    onEnd (evt) {
      console.log('onEnd', evt)
    },
    onMove (evt) {
      console.log('onMove', evt)
    },
    onStart (evt) {
      console.log('onStart', evt)
    }
  }
}
</script>

<style>
.ghost {
  opacity: 0.5;
  background-color: #ccc;
}
.handle {
  cursor: move;
  user-select: none;
}
.ignore {
  pointer-events: none;
}
</style>

到了這里，關(guān)于vue中使用vue-draggable教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！