vue拖动改变模板_vue实现div拖拽互换位置，vuediv拖拽互换

你可以使用vue-draggable插件实现div拖拽互换位置的功能。

安装插件：

npm install vuedraggable --save

在组件中引入：

import draggable from 'vuedraggable'

使用示例：

<template>
  <draggable v-model="list" :options="{group:'items'}">
    <div v-for="(item, index) in list" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </draggable>
</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' },
        { id: 4, name: 'item4' }
      ]
    }
  }
}
</script>

<style>
.item {
  width: 100px;
  height: 100px;
  background-color: #eee;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上述示例中，我们使用了vuedraggable组件，并使用v-model指令将list数组绑定到组件中。通过设置options属性的group值为'items'，可以实现多个拖拽列表之间的拖拽互换。在模板中，我们使用v-for指令遍历list数组，生成多个div元素，并通过设置:key属性来保证每个元素的唯一性。每个div元素的内容显示为item.name。

当我们拖动某个div元素时，列表中的元素会自动互换位置，而list数组中的顺序也会相应地更新。