vuedraggable 不拖动点击置顶
时间: 2023-08-28 08:17:56 浏览: 57
你可以使用 vuedraggable 插件的 `handle` 属性来实现只有在拖动指定元素时才能拖动。这样,你可以将点击置顶的元素作为拖动的手柄,其他元素则不会触发拖动。
首先,在你的拖动列表中的每个项中添加一个点击置顶的按钮或其他元素,例如一个图标。然后,在 `vuedraggable` 的 `handle` 属性中指定这个按钮或元素的选择器。这样,只有当用户点击这个按钮或元素时,才会触发拖动。
以下是一个示例代码:
```html
<template>
<div>
<draggable v-model="list" :options="dragOptions">
<div v-for="(item, index) in list" :key="index">
<div class="handle">点击置顶</div>
<div>{{ item }}</div>
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable
},
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3'],
dragOptions: {
handle: '.handle'
}
};
}
};
</script>
<style>
.handle {
cursor: move;
/* 在这里添加你想要的点击置顶样式 */
}
</style>
```
在上面的示例中,我们使用了 `vuedraggable` 插件,并在每个拖动项中添加了一个带有 `handle` 类的 `<div>` 元素作为点击置顶按钮。然后,在 `dragOptions` 中指定了 `handle: '.handle'`,以告诉插件使用带有 `handle` 类的元素作为拖动的手柄。
你可以根据你的需求修改示例代码中的样式和拖动列表的数据。希望这可以帮助到你!如果还有其他问题,请随时提问。