vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

下面是实现"vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序"的完整攻略。

1. 确保已安装vuedraggble插件

在开始实现之前，你需要先在你的项目中安装vuedraggable插件。你可以通过以下命令来安装：

npm install vuedraggable --save

2. 使用vuedraggable组件

在你的Vue组件模板中，你需要使用vuedraggable组件创建可拖拽的组件列表。

<template>
  <vuedraggable v-model="items">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </vuedraggable>
</template>

3. 配置vuedraggable组件的API options

vuedraggable组件提供了多个可配置的API options来实现不同的功能。针对我们需要的盒子之间相互拖拽排序，我们需要使用两个API options，分别是group和move方法：

3.1 group

通过group API option，我们可以为不同的拖拽元素指定相同的组，使它们之间可以相互拖拽。

<template>
  <vuedraggable v-model="items" :group="{ name: 'box' }">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </vuedraggable>
</template>

3.2 move方法

通过move方法 API option，我们可以自定义拖拽元素的移动方式，使它们之间可以相互拖拽并排序。

<template>
  <vuedraggable v-model="items" :group="{ name: 'box' }" :move="onMove">
    <div v-for="item in items" :key="item.id" class="item">
      {{ item.name }}
    </div>
  </vuedraggable>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          name: '盒子1'
        },
        {
          id: 2,
          name: '盒子2'
        },
        {
          id: 3,
          name: '盒子3'
        },
        {
          id: 4,
          name: '盒子4'
        }
      ]
    }
  },
  methods: {
    onMove(evt, originalEvent) {
      // 通过evt的draggedContext和relatedContext获取拖拽元素和目标元素的位置，需要返回一个布尔值表示是否允许拖拽
      console.log(evt.draggedContext.index, evt.relatedContext.index)
      return true
    }
  }
}
</script>

示例说明

示例1

下面是一个完整的例子，实现了多个组件之间的相互拖拽排序：

<template>
  <div class="app">
    <div class="box-container">
      <h2>盒子列表</h2>
      <vuedraggable v-model="boxes" :group="{ name: 'box' }" :move="onMove">
        <div v-for="box in boxes" :key="box.id" class="box">
          {{ box.name }}
        </div>
      </vuedraggable>
    </div>
    <div class="item-container">
      <h2>物品列表</h2>
      <vuedraggable v-model="items" :group="{ name: 'box' }">
        <div v-for="item in items" :key="item.id" class="item">
          {{ item.name }}
        </div>
      </vuedraggable>
    </div>
  </div>
</template>

<style>
.box-container {
  float: left;
  width: 50%;
}

.item-container {
  float: left;
  width: 50%;
}

.box {
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f1f1f1;
  margin: 5px;
  padding: 10px;
}

.item {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  margin: 5px;
  padding: 10px;
}
</style>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      boxes: [
        {
          id: 1,
          name: '盒子1'
        },
        {
          id: 2,
          name: '盒子2'
        },
        {
          id: 3,
          name: '盒子3'
        }
      ],
      items: [
        {
          id: 1,
          name: '物品1'
        },
        {
          id: 2,
          name: '物品2'
        },
        {
          id: 3,
          name: '物品3'
        },
        {
          id: 4,
          name: '物品4'
        },
        {
          id: 5,
          name: '物品5'
        }
      ]
    }
  },
  methods: {
    onMove(evt, originalEvent) {
      // 通过evt的draggedContext和relatedContext获取拖拽元素和目标元素的位置，需要返回一个布尔值表示是否允许拖拽
      console.log(evt.draggedContext.index, evt.relatedContext.index)
      return true
    }
  }
}
</script>

示例2

下面是一个简单的例子，实现了两个盒子之间的相互拖拽：

<template>
  <div class="app">
    <h2>盒子1</h2>
    <vuedraggable v-model="box1" :group="{ name: 'box' }" :move="onMove"></vuedraggable>
    <h2>盒子2</h2>
    <vuedraggable v-model="box2" :group="{ name: 'box' }" :move="onMove"></vuedraggable>
  </div>
</template>

<style>
.app {
  margin: 20px;
}

.vuedraggable-dragging {
  opacity: 0.5;
}
</style>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      box1: [
        {
          id: 1,
          name: '物品1'
        },
        {
          id: 2,
          name: '物品2'
        },
        {
          id: 3,
          name: '物品3'
        }
      ],
      box2: [
        {
          id: 4,
          name: '物品4'
        },
        {
          id: 5,
          name: '物品5'
        }
      ]
    }
  },
  methods: {
    onMove(evt, originalEvent) {
      // 通过evt的draggedContext和relatedContext获取拖拽元素和目标元素的位置，需要返回一个布尔值表示是否允许拖拽
      console.log(evt.draggedContext.index, evt.relatedContext.index)
      return true
    }
  }
}
</script>