vue拖拽添加的简单实现

接下来我将详细讲解如何实现 Vue 拖拽添加的简单实现，包括如何安装依赖、编写代码、添加样式等具体步骤。

步骤一 安装依赖

首先需要在项目中安装 Vue.Draggable 这个库，它是一个适用于 Vue 的 drag-and-drop 库，可以帮助我们在 Vue 项目中轻松地实现拖拽功能。

npm install -S vuedraggable

步骤二 编写代码

在组件中引入 vuedraggable 依赖，并且在 template 中编写拖拽块及添加按钮。

<template>
  <div class="drag-container">
    <draggable v-model="list" class="drag-wrapper" :options="draggableOptions">
      <div v-for="(item, index) in list" :key="index" class="drag-item">
        {{ item }}
      </div>
    </draggable>
    <button @click="addNewBlock" class="add-block-btn">增加块</button>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data () {
    return {
      list: ['拖拽块 1', '拖拽块 2', '拖拽块 3'],
      draggableOptions: {
        animation: 200
      }
    }
  },
  methods: {
    addNewBlock () {
      this.list.push('新增块')
    }
  }
}
</script>

代码中以 draggable 作为外层包裹元素，使用 vuedraggable 组件进行组件编写。v-model 绑定的是 list 数组，draggableOptions 是 draggable 组件的可选参数，动画时间设置为 200ms 。

在 draggable 元素中，使用 v-for 遍历 list 数组，为拖拽块填充内容。添加按钮通过 @click 绑定 addNewBlock 方法，每次点击后新增一个文本块。

步骤三 添加样式

最后，我们还需要给拖拽块和添加按钮添加一些样式，让它们看起来更美观。

.drag-wrapper {
  min-height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 6px;
}
.drag-item {
  width: 100px;
  height: 40px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-block-btn {
  margin-top: 10px;
  width: 100px;
  height: 30px;
  border: none;
  color: #fff;
  background-color: #409eff;
  border-radius: 4px;
  cursor: pointer;
}

这些样式会让我们的组件看起来更加清晰明了。

示例说明

示例一：拖拽排序

在 draggable 元素上添加 drag 类名以及设置 group 属性，为拖拽块添加排序功能。

<draggable v-model="list" class="drag-wrapper" :options="draggableOptions" :group="{ name: 'block' }">

示例二：限制拖拽方向

在 draggable 元素上添加 direction 属性，限制拖拽方向。

<draggable v-model="list" class="drag-wrapper" :options="draggableOptions" :direction="'vertical'">

以上就是 Vue 拖拽添加的简单实现。希望以此可以对大家有所帮助。