vue中如何实现拖拽调整顺序功能

首先我们需要理解Vue中拖拽调整顺序的工作原理和步骤。通常的实现方式是用Vue的指令v-for生成一个列表，然后通过给每个列表项添加拖放事件来实现拖拽和调整顺序。

以下是实现vue中拖拽调整顺序的具体步骤：

第一步：安装依赖

在Vue项目中需要使用vue-dragscroll和vuedraggable这两个库，因此需要先进行安装。

npm install --save vue-dragscroll vuedraggable

第二步：引入依赖

在main.js中引入依赖项。

import Vue from 'vue'
import VueDraggable from 'vuedraggable'
import VueDragscroll from 'vue-dragscroll'

Vue.use(VueDragscroll)
Vue.component('draggable', VueDraggable)

第三步：创建一个支持拖拽排序的列表

接下来，在Vue的组件中创建列表，可以使用v-for指令，将列表渲染出来。

<draggable
    v-model="list"
    :options="{group:{name:'people'}}"
    @end="onDragEnd">
    <div v-for="(item,index) in list" :key="item.name">
        <h4>{{item.name}}</h4>
        <p>{{item.description}}</p>
    </div>
</draggable>

在代码中，v-model绑定了列表数据，options设置了分组，必须设置分组才能实现拖拽排序，onDragEnd绑定了列表项排序变化后的函数。

第四步：编写JS代码

最后，在Vue的组件中编写相应的JS代码，用来处理拖拽事件。

export default {
  data() {
    return {
      list: [{
        name: 'Tom',
        description: 'Male'
      }, {
        name: 'Alice',
        description: 'Female'
      }, {
        name: 'Jerry',
        description: 'Male'
      }, {
        name: 'Bob',
        description: 'Male'
      }]
    }
  },
  methods: {
    onDragEnd() {
      console.log(this.list)
    }
  }
}

在代码中，我们定义了一个名为list的数组，其中包含了四个列表项，然后在onDragEnd中打印出数据。

示例一：拖动改变图片顺序

下面我们用一个拖动图片的示例来帮助理解。我们可以在模板中使用v-for指令来渲染一个图片列表。然后我们将每个列表项绑定到vue-draggable组件中作为一个draggable的标记。通过draggable绑定的属性可以实现图片的拖动。

<template>
  <div>
    <draggable 
      :list="images"
      :move="onMove"
      :options="{group:'photo'}"
      @end="onEnd">
      <img 
        v-for="(image, index) in images"
        :key="index"
        :src="image.src"
        draggable="false"
        :class="getClass(index)"/>
    </draggable>
    <p>顺序: {{images.map(img => img.id).join(', ')}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: require('@/assets/img/image1.jpg'), id: 1 }, 
        { src: require('@/assets/img/image2.jpg'), id: 2 },
        { src: require('@/assets/img/image3.jpg'), id: 3 },
        { src: require('@/assets/img/image4.jpg'), id: 4 },
        { src: require('@/assets/img/image5.jpg'), id: 5 },
      ],
    };
  },
  methods: {
    onMove: function (evt, originalElement, destinationElement) {
      // 限制只在同一分组才能拖拽
      if (evt.to.dataset.group !== evt.from.dataset.group) {
          return false;
      }
    },
    onEnd(event) {
      console.log('end:', event);
    },
    getClass(index) {
      const length = this.images.length;
      if (index === 0) {
        return 'bg-red';
      } else if (index === length - 1) {
        return 'bg-blue';
      }
      return 'bg-green';
    }
  }
}
</script>

在代码中，我们使用了Vue.Draggable组件包装了图片列表，并通过v-for指令循环遍历图片数组元素，将每个元素绑定到图片标签上。我们使用options属性传递了分组配置，通过该属性可以对图片元素进行分组（参考第三步）。同时，我们实现了自动生成类名的处理方法，根据图片的位置，设定不同的class样式表。

示例二：拖动改变文本顺序

下面我们再来看一个适用于文本的示例。可以参照下面的代码：

<template>
  <div>
    <draggable 
      :list="items"
      :move="onMove"
      :options="{group:'text'}"
      @end="onEnd">
      <div 
        v-for="(item, index) in items"
        :key="item.id"
        draggable="false"
        :class="getClass(index)">
        <p>{{ item.content }}</p>
      </div>
    </draggable>
    <p>顺序: {{items.map(item => item.id).join(', ')}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {content: "item1", id: 1},
        {content: "item2", id: 2},
        {content: "item3", id: 3},
        {content: "item4", id: 4},
        {content: "item5", id: 5},
      ],
    };
  },
  methods: {
    onMove: function (evt, originalElement, destinationElement) {
      // 限制只在同一分组才能拖拽
      if (evt.to.dataset.group !== evt.from.dataset.group) {
          return false;
      }
    },
    onEnd(event) {
      console.log('end:', event);
    },
    getClass(index) {
      const length = this.items.length;
      if (index === 0) {
        return 'bg-red';
      } else if (index === length - 1) {
        return 'bg-blue';
      }
      return 'bg-green';
    }
  }
}
</script>

比较上一个代码示例，这次我们只修改了模板中的代码，将图片标签替换成了div标签，嵌套了一个p标签来展示文本。然后我们又调整了getClass方法的实现方式，改为自动生成class样式的方式。其他部分与上述示例相同。