拖拽-VUE

最新推荐文章于 2024-08-01 12:56:26 发布

原创最新推荐文章于 2024-08-01 12:56:26 发布 · 120 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

VueDraggable是基于Vue.js的拖拽组件，用于实现拖拽排序和调整大小。用户需通过npm或yarn安装后，在组件中引入并注册。示例展示如何在模板中使用draggable组件绑定v-model和v-for渲染列表数据。

Vue Draggable 是一个基于 Vue.js 的可拖拽组件库，可以用于实现拖拽排序、拖拽调整大小等功能。使用 Vue Draggable 需要先安装它，可以通过 npm 或 yarn 安装：

npm install vuedraggable --save
# 或者
yarn add vuedraggable

安装完成后，在 Vue 组件中引入并注册 Vue Draggable：

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  }
}

然后在模板中使用 `draggable` 组件，例如：

<template>
  <div>
    <draggable v-model="list">
      <div v-for="item in list" :key="item.id">{{ item.text }}</div>
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

在上面的例子中，`draggable` 组件的 `v-model` 绑定了一个数组 `list`，表示当前拖拽的列表数据。在 `draggable` 组件内部，使用 `v-for` 渲染每个列表项，并为每个列表项绑定一个唯一的 `key` 属性。这样，当列表项发生变化时，Vue 会根据 `key` 属性来判断哪些列表项需要更新。

除了 `v-model` 属性外，`draggable` 组件还提供了许多其他属性和事件，可以根据实际需求进行配置和使用。具体可以参考 Vue Draggable 的官方文档：https://github.com/SortableJS/Vue.Draggable。
或者：https://www.itxst.com/vue-draggable/2ije3a7n.html