vuedraggable禁用

在使用vuedraggable组件时，如果要禁用某个控件的拖拽进指定的容器，可以通过在onMove事件中进行判断来实现。首先，获取当前拖拽的控件名，可以使用e.draggedContext.element.name来获取。接下来，可以使用条件判断来判断该控件是否要拖进指定的容器。如果符合条件，可以通过返回false来禁用该控件的拖拽进容器，否则返回true允许拖拽。

另外，之前尝试过add和end这两个事件，但它们在事件结束后才触发回调。为了在移动时就进行判断，最好的解决办法是在move属性中绑定一个事件，并根据条件返回true或false来禁用或允许拖拽。这样，就可以实现对vuedraggable组件中某个控件的禁用。

相关问题

vuedraggable文档

`vuedraggable` 是一个基于 Vue.js 的可拖拽列表组件，可以用于实现拖拽排序、拖拽添加、拖拽删除等功能。它支持多种方式的拖拽，如鼠标拖拽、触摸拖拽等。

以下是 `vuedraggable` 的使用文档：

### 安装

使用 npm 或 yarn 安装 `vuedraggable`：

npm install vuedraggable --save
# 或
yarn add vuedraggable

### 引入

在需要使用 `vuedraggable` 的组件中引入：

import draggable from 'vuedraggable'

### 基本使用

在组件中使用 `draggable` 标签，并绑定需要拖拽的数据：

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

其中，`list` 是一个数组，用于存储需要拖拽的数据。在 `draggable` 组件中，使用 `v-model` 绑定这个数组，即可实现数据的拖拽排序。

### 属性

`vuedraggable` 支持多种属性，用于控制拖拽的行为和样式。

- `value`：绑定拖拽的数据数组，可以使用 `v-model` 代替。
- `group`：设置拖拽分组，同一组内的元素可以互相拖拽。可以是字符串类型或对象类型，对象类型的值支持以下属性：

- `name`：分组名称。
- `put`：是否允许拖拽放置到该分组内的元素中，默认为 `true`。
- `pull`：是否允许从该分组内的元素中拖拽出来，默认为 `true`。

- `handle`：设置拖拽把手的 CSS 选择器，只有在把手内拖拽才有效。
- `disabled`：禁用拖拽功能，可以是布尔类型或返回布尔类型的函数。
- `clone`：是否复制元素，而不是移动元素。可以是布尔类型或返回布尔类型的函数。
- `move`：自定义拖拽元素的移动方式，可以是函数或对象。函数接收 3 个参数：

- `evt`：拖拽事件对象。
- `originalEvent`：原始事件对象。
- `element`：拖拽元素。

对象类型的值支持以下属性：

- `start`：拖拽开始时的回调函数，接收 2 个参数：`evt` 和 `element`。
- `drag`：拖拽进行中的回调函数，接收 3 个参数：`evt`、`originalEvent` 和 `element`。
- `end`：拖拽结束时的回调函数，接收 2 个参数：`evt` 和 `element`。
- `onMove`：自定义移动方式的函数，接收 2 个参数：`evt` 和 `element`，返回 `true` 表示允许移动，返回 `false` 表示禁止移动。

- `tag`：设置拖拽容器的 HTML 标签，默认为 `div`。
- `list`：绑定拖拽的数据数组，可以使用 `v-model` 代替。
- `componentData`：传递给拖拽元素的额外数据。可以是对象类型或返回对象类型的函数。
- `moveTransition`：设置拖拽元素的过渡动画，可以是字符串类型或对象类型。对象类型的值支持以下属性：

- `css`：设置 CSS 过渡属性，默认为 `true`。
- `duration`：设置过渡动画的时长，单位为毫秒，默认为 `200`。
- `curtain`：设置拖拽元素的幕布，即在拖拽过程中的半透明遮罩层。可以是字符串类型或对象类型。对象类型的值支持以下属性：
- `zIndex`：设置幕布的层级，默认为 `9999`。
- `opacity`：设置幕布的不透明度，默认为 `0.5`。
- `bgColor`：设置幕布的背景颜色，默认为 `#fff`。

### 事件

`vuedraggable` 支持多种事件，用于在拖拽过程中执行自定义操作。

- `start`：拖拽开始时的回调函数，接收 2 个参数：`evt` 和 `element`。
- `add`：元素被添加到容器时的回调函数，接收 2 个参数：`evt` 和 `element`。
- `remove`：元素从容器中删除时的回调函数，接收 2 个参数：`evt` 和 `element`。
- `update`：拖拽元素位置发生变化时的回调函数，接收 4 个参数：`evt`、`originalEvent`、`oldIndex` 和 `newIndex`。
- `end`：拖拽结束时的回调函数，接收 2 个参数：`evt` 和 `element`。

### 示例

以下是一个完整的 `vuedraggable` 示例：

<template>
  <div>
    <draggable v-model="list" group="fruits" handle=".handle" @add="onAdd">
      <div v-for="(item, index) in list" :key="item.id" class="item">
        <span class="handle">↕</span>
        {{ item.content }}
        <button @click="removeItem(index)">删除</button>
      </div>
    </draggable>
    <draggable v-model="fruits" group="fruits">
      <div v-for="fruit in fruits" :key="fruit" class="fruit">{{ fruit }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, content: '苹果' },
        { id: 2, content: '香蕉' },
        { id: 3, content: '橘子' },
        { id: 4, content: '西瓜' }
      ],
      fruits: ['苹果', '香蕉', '橘子', '西瓜', '葡萄']
    }
  },
  methods: {
    removeItem(index) {
      this.list.splice(index, 1)
    },
    onAdd(evt) {
      console.log('添加了元素：', evt.item)
    }
  }
}
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.handle {
  margin-right: 10px;
  cursor: pointer;
}
.fruit {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

以上示例实现了一个拖拽列表，可以对列表项进行排序和删除。同时，还提供了一个可拖拽的水果列表，可以将水果添加到列表中。

vuedraggable中文文档

VueDraggable 是一个基于 Vue.js 的拖放组件库，用于实现可拖拽和可排序的列表和网格布局。

以下是 VueDraggable 的中文文档：

## 安装

使用 npm 安装：

npm install vuedraggable --save

## 使用

在 Vue 应用程序中引入 vuedraggable 组件：

import draggable from 'vuedraggable'

然后在 Vue 组件中使用它：

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

在上面的示例中，我们使用 `v-model` 将列表数据绑定到 `list` 变量上，并将每个项目渲染为一个 `div` 元素。

## API

### Props

以下是可用的 props：

| 属性名 | 类型 | 描述 |
| --- | --- | --- |
| value / v-model | Array | 绑定的列表数据 |
| clone | Function | 用于克隆元素的函数 |
| tag | String | 渲染列表元素的 HTML 标签 |
| move | Function | 用于移动元素的函数 |
| component-data | Object | 传递给组件的数据 |
| component-name | String | 用于渲染每个元素的组件名称 |
| component-class | String | 用于渲染每个元素的 CSS 类名 |
| component-style | Object | 用于渲染每个元素的 CSS 样式 |
| handle | String | 用于拖动元素的选择器 |
| disabled | Boolean | 是否禁用拖放功能 |
| delay | Number | 拖动开始前的等待时间 |
| group | String / Object | 指定拖动元素所属的组 |
| ghost-class | String | 拖动时元素的 CSS 类名 |
| ghost-style | Object | 拖动时元素的 CSS 样式 |
| fallback-class | String | 拖动失败时元素的 CSS 类名 |
| fallback-style | Object | 拖动失败时元素的 CSS 样式 |
| scroll | Boolean / Object | 拖动到边缘时是否自动滚动 |
| scroll-sensitivity | Number | 拖动到边缘时滚动的敏感度 |
| scroll-speed | Number | 拖动到边缘时滚动的速度 |

### 事件

以下是可用的事件：

| 事件名 | 描述 |
| --- | --- |
| start | 开始拖动元素时触发的事件 |
| add | 将元素添加到列表中时触发的事件 |
| remove | 从列表中删除元素时触发的事件 |
| update | 更新列表中元素位置时触发的事件 |
| end | 结束拖动元素时触发的事件 |
| choose | 选择元素时触发的事件 |
| unchoose | 取消选择元素时触发的事件 |
| sort | 对列表进行排序时触发的事件 |
| filter | 过滤列表时触发的事件 |
| clone | 克隆元素时触发的事件 |
| move | 移动元素时触发的事件 |

### 插槽

以下是可用的插槽：

| 插槽名 | 描述 |
| --- | --- |
| default | 列表元素的内容 |
| before | 列表前面的内容 |
| after | 列表后面的内容 |

## 示例

以下是一个完整的示例：

<template>
  <div>
    <h1>VueDraggable 示例</h1>
    <draggable v-model="list" :clone="clone" :tag="'ul'" :handle="'.handle'">
      <li v-for="item in list" :key="item.id" :class="'item-'+item.id">
        <span class="handle">☰</span>
        <span class="name">{{item.name}}</span>
      </li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data: function () {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    }
  },
  methods: {
    clone: function (item) {
      return { id: item.id, name: item.name }
    }
  }
}
</script>

<style>
.handle {
  cursor: move;
}
</style>

在上面的示例中，我们创建了一个列表，并使用 `v-model` 将其绑定到 `list` 变量上。

使用 `clone` prop 克隆元素，使用 `tag` prop 设置列表元素的 HTML 标签，使用 `handle` prop 设置拖动元素的选择器。

设置每个列表元素的 CSS 类名和内容，然后使用 `draggable` 组件渲染它们。