vue-draggable配置参数clone

在vue-draggable中，你可以使用配置参数clone来控制拖动元素的克隆行为。通过设置clone为true，你可以使拖动的元素在拖动时创建一个克隆元素，并将其显示在原始位置上。这个克隆元素会随着拖动而移动，而原始元素则保持不动。这在一些情况下非常有用，比如当你想要在拖动时保留原始元素的位置或需要进行克隆操作时。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue-draggable](https://blog.csdn.net/weixin_33959449/article/details/112874061)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

相关问题

vue3 draggable中的clone怎么实现

在 Vue3 Draggable 中，当你拖动一个元素时，可以通过设置 `clone` 属性来克隆该元素。具体实现如下：

1. 在你的组件中添加一个 `draggable` 的元素，并设置 `clone` 属性为 `true`。

<draggable v-model="list" :clone="true">
  <div v-for="(item, index) in list" :key="index">
    {{ item }}
  </div>
</draggable>

2. 在你的 `draggable` 组件中使用 `createElement` 函数创建一个新的元素来代替被拖动的元素。

import { defineComponent, h } from 'vue'
import Draggable from 'vuedraggable'

export default defineComponent({
  components: {
    Draggable
  },
  setup() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  render() {
    return h(Draggable, {
      modelValue: this.list,
      'onUpdate:modelValue': (val) => {
        this.list = val
      },
      clone: true,
      item: 'div',
      'data-id': 'id'
    }, this.list.map((item, index) => {
      return h('div', {
        key: index,
        'data-id': index
      }, item)
    }))
  }
})

在这个例子中，我们使用了 `createElement` 函数来创建一个 `div` 元素，并为其设置 `key` 和 `data-id` 属性。这样，被拖动的元素就会被克隆并替换成新创建的元素。

avue-draggable的使用手册

`avue-draggable`是一个Vue.js的插件，它能够让你轻松地实现拖拽功能。下面是该插件的使用手册：

### 安装

你可以使用npm或yarn来安装`avue-draggable`：

# 使用npm安装
npm install avue-draggable --save

# 使用yarn安装
yarn add avue-draggable

### 引入

在Vue.js应用中，你需要在组件中引入`avue-draggable`插件：

import draggable from 'avue-draggable'

export default {
  ...
  components: {
    draggable
  },
  ...
}

### 使用

在组件中使用`draggable`插件：

<template>
  <div>
    <draggable v-model="list">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </draggable>
  </div>
</template>

在上面的代码中，`v-model`指令用于双向数据绑定，它将`draggable`插件中的`list`属性和组件中的列表数据进行了绑定。`v-for`指令用于循环渲染列表数据，而`key`属性则用于标识每个列表项。

### API

`avue-draggable`插件提供了多个API，以下是一些常用的API：

#### `v-model`

`v-model`指令用于双向数据绑定，它将`draggable`插件中的列表数据和组件中的数据进行了绑定。当你拖拽列表项时，`list`属性将会自动更新，从而实现了数据的双向绑定。

<draggable v-model="list">
  ...
</draggable>

#### `transition-duration`

`transition-duration`属性用于设置拖拽动画的持续时间（以毫秒为单位）。默认值为`200`毫秒。

<draggable v-model="list" :transition-duration="300">
  ...
</draggable>

#### `transition-mode`

`transition-mode`属性用于设置拖拽动画的模式。可选值为`out-in`（默认值）和`in-out`。

<draggable v-model="list" :transition-mode="'in-out'">
  ...
</draggable>

#### `ghost-class`

`ghost-class`属性用于设置拖拽时占位符的样式。

<draggable v-model="list" :ghost-class="'my-ghost-class'">
  ...
</draggable>

#### `handle`

`handle`属性用于设置拖拽时的手柄元素。只有当拖拽手柄元素时，列表项才会被拖拽。

<draggable v-model="list" handle=".my-handle">
  <div v-for="(item, index) in list" :key="index">
    <div class="my-handle">拖拽手柄</div>
    <div class="my-content">{{ item }}</div>
  </div>
</draggable>

#### `clone`

`clone`属性用于设置是否复制拖拽元素。默认值为`false`，即不复制。

<draggable v-model="list" :clone="true">
  ...
</draggable>

#### `tag`

`tag`属性用于设置拖拽元素的标签名。默认值为`div`。

<draggable v-model="list" :tag="'ul'">
  ...
</draggable>

### 总结

`avue-draggable`是一个强大的Vue.js插件，它可以让你轻松地实现拖拽功能。在使用这个插件时，你需要先安装它，然后在组件中引入它，最后在组件中使用它即可。此外，`avue-draggable`还提供了多个API，你可以根据自己的需求来选择使用。