vue拖拽排序组建封装

Vue拖拽排序组件可以通过封装实现复用和方便使用。以下是一个简单的Vue拖拽排序组件的实现：

1. 安装vue-draggable插件

首先，我们需要安装Vue.js的拖拽排序插件`vue-draggable`，它提供了`draggable`和`sortable`两个组件。

npm install vuedraggable --save

2. 创建Draggable.vue组件

在Vue项目中创建一个Draggable.vue组件，用于封装拖拽排序功能。该组件包含以下代码：

<template>
  <draggable v-model="list" :options="options">
    <slot></slot>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'Draggable',
  components: { draggable },
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      },
    },
    options: {
      type: Object,
      default: function() {
        return {};
      },
    },
  },
};
</script>

在这个组件中，我们将`draggable`组件作为子组件，并使用`slot`来插入要排序的元素。我们还定义了两个属性：`list`和`options`。`list`属性是我们要排序的元素数组，`options`属性是传递给`draggable`组件的选项。

3. 在父组件中使用Draggable组件

在父组件中，我们可以使用`<draggable>`标签来包含要排序的元素，就像这样：

<template>
  <div>
    <draggable :list="items" :options="options">
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import Draggable from './Draggable.vue';

export default {
  name: 'App',
  components: { Draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      options: {
        animation: 200,
      },
    };
  },
};
</script>

在这个例子中，我们将`items`数组传递给`<draggable>`组件的`list`属性，将动画速度设置为200毫秒。

4. 定制Draggable组件

我们还可以通过添加一些自定义代码来进一步定制`Draggable`组件的行为。例如，我们可以添加一个事件处理程序来监听排序后的结果：

<template>
  <draggable v-model="list" :options="options" @end="onEnd">
    <slot></slot>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'Draggable',
  components: { draggable },
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      },
    },
    options: {
      type: Object,
      default: function() {
        return {};
      },
    },
  },
  methods: {
    onEnd: function(evt) {
      this.$emit('onEnd', evt);
    },
  },
};
</script>

在这个例子中，我们添加了一个`onEnd`方法，当拖拽排序完成时，会触发`end`事件并调用该方法。我们还使用`$emit`方法将事件传递给父组件。

5. 在父组件中监听Draggable组件的事件

最后，在父组件中，我们可以通过添加一个相应的事件处理程序来监听`onEnd`事件：

<template>
  <div>
    <draggable :list="items" :options="options" @onEnd="onEnd">
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

<script>
import Draggable from './Draggable.vue';

export default {
  name: 'App',
  components: { Draggable },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      options: {
        animation: 200,
      },
    };
  },
  methods: {
    onEnd: function(evt) {
      console.log('Sorted item:', evt.item);
      console.log('New items order:', this.items);
    },
  },
};
</script>

在这个例子中，我们添加了一个`onEnd`方法，当`onEnd`事件发生时，会输出排序后的元素和新的元素顺序。

这就是一个简单的Vue拖拽排序组件的实现。通过封装，我们可以轻松地将这个组件用于不同的应用场景，并实现代码重用。