首页vuedraggable2.4禁止拖拽出所在区域

vuedraggable2.4禁止拖拽出所在区域

时间: 2023-09-25 10:09:19 浏览: 169

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

5星 · 资源好评率100%

Vue.js 是一款流行的前端框架，用于构建用户界面。在开发过程中，有时我们需要实现一些交互性较强的功能，比如元素的拖拽排序。本文将详细介绍如何在 Vue 中利用 vuedraggable 这个第三方库来实现选中、拖拽和排序的效果。 vuedraggable 是一个基于 Sortable.js 的 Vue2 组件，它允许我们在 Vue 应用中轻松地创建可拖拽和可排序的列表。我们需要通过 npm 来安装这个库： ```bash npm install vuedraggable ``` 安装完成后，我们需要在项目中引入 vuedraggable，并在组件中使用它。以下是一个基本的示例： ```javascript import draggable from 'vuedraggable'; export default { components: { draggable }, data() { return { cities: ['北京', '上海', '广州', '深圳'], checkedCities: ['北京'], checkAll: false, isIndeterminate: false }; }, methods: { handleCheckAllChange(value) { this.checkedCities = value ? this.cities.slice() : []; this.isIndeterminate = false; }, handleCheckedCitiesChange(values) { this.isIndeterminate = (values.length > 0 && values.length < this.cities.length); } } }; ``` 在这个例子中，`cities` 是原始数据列表，`checkedCities` 存储已选中的城市，`checkAll` 和 `isIndeterminate` 分别用于全选和半选的状态控制。为了实现选中效果，我们可以使用 Element UI 的 `el-checkbox` 和 `el-checkbox-group` 组件。通过 `v-model` 绑定数据，我们可以轻松地实现全选和单选功能。同时，`@change` 事件用于更新状态。 ```html <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <draggable draggable=".item" :list="cities"> <el-checkbox :class="{'item': checkedCities.find(v => v === city)}" v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox> </draggable> </el-checkbox-group> ``` 接下来，我们要实现拖拽排序。vuedraggable 提供了 `:list` 属性，我们可以将数据源传入，当拖拽操作发生时，vuedraggable 会自动更新数据。在这个例子中，我们把 `cities` 作为 `:list` 的值。 ```html <draggable draggable=".item" :list="cities"> <el-checkbox ...></el-checkbox> </draggable> ``` 为了让只有选中的城市能被拖动，我们需要添加 `draggable=".item"` 条件。不过，这会导致已选中的城市无法被拖动到未选中的位置。为了解决这个问题，我们可以对数据源进行排序，确保选中和未选中的城市分开。 ```javascript methods: { // ... sortCities() { this.cities.sort((a, b) => this.checkedCities.includes(a) - this.checkedCities.includes(b)); } }, mounted() { this.sortCities(); } ``` 我们可以在 `mounted` 生命周期钩子中调用 `sortCities` 方法，确保组件加载后数据源按选中状态排序。通过 Vue 结合 vuedraggable，我们可以方便地实现选中、拖拽和排序的效果。在使用 Vue 的库时，要注意遵循数据驱动视图的原则，避免直接操作 DOM。vuedraggable 提供的回调和属性让我们能够灵活地控制拖拽行为，从而创建出更加丰富的交互体验。

可以通过设置 `group` 属性来限制拖拽出所在区域。具体方法如下： 1. 在引入 `vuedraggable` 的组件中设置 `group` 属性： ``` <template> <div> <draggable v-model="list" :group="{ name: 'list', pull: 'clone', put: false }">  </draggable> </div> </template> ``` 2. 设置 `group` 属性的 `put` 属性为 `false`，表示不允许放置到其他分组中。 ``` <draggable :group="{ name: 'list', pull: 'clone', put: false }"></draggable> ``` 设置后，拖拽时只能在当前分组中移动，无法拖拽到其他分组中。

阅读全文