Vue3使用拖拽插件 - vuedraggable
Vue3 | 拖拽 | 插件 | vuedraggable
·
1. 安装
pnpm i -S vuedraggable@next
2. 导入
import draggable from "vuedraggable";
3. 基本使用
<draggable
:list="dragList"
item-key="id"
ghost-class="_ghost"
chosen-class="_chosenClass"
animation="300"
>
<template #item="{ element }">
<div class="_drag-item">
{{ element.name }}
</div>
</template>
</draggable>
参数说明:
- list:绑定数据
- item-key: 用于指定每一项唯一的标识
- ghost-class:设置拖动元素的占位符类名
- chosen-class:设置被选中目标的样式
- animation:拖动时的动画效果
更多用法参考vuedraggable 中文网
4. 完整示例-复制即可使用
<template>
<!-- 上下拖动 -->
<div class="up-down">
<draggable
item-key="id"
:list="dragList"
ghost-class="_ghost"
chosen-class="_chosenClass"
animation="300"
>
<template #item="{ element }">
<div class="_drag-item">
{{ element.name }}
</div>
</template>
</draggable>
</div>
</template>
<script lang="ts" setup name='DragUpDown'>
import { Ref, watchEffect } from "vue";
import draggable from "vuedraggable";
interface DragListDataModel {
id: number,
name: string
}
interface DragPropsDataModel {
modelValue: Array<{
id: number
name: string
}>
}
const props = defineProps<DragPropsDataModel>()
// 这里的数据供调试使用,亦可从外部传入数据配合watchEffect使用
const dragList: Ref<DragListDataModel[]> = ref([
{id: 1, name: '看万山红遍,层林尽染;漫江碧透,百舸争流。'}
{id: 3, name: '怅寥廓,问苍茫大地,谁主沉浮?'}
{id: 0, name: '独立寒秋,湘江北去,橘子洲头。'}
{id: 2, name: '鹰击长空,鱼翔浅底,万类霜天竞自由。'}
{id: 4, name: '携来百侣曾游,忆往昔峥嵘岁月稠。'}
{id: 5, name: '恰同学少年,风华正茂;书生意气,挥斥方遒。'}
{id: 6, name: '指点江山,激扬文字,粪土当年万户侯。'}
{id: 7, name: '曾记否,到中流击水,浪遏飞舟?'}
])
watchEffect(() => {
if (props.modelValue.length > 0) {
dragList.value = props.modelValue
}
})
</script>
<style lang="scss" scoped>
._drag-item {
border: solid 1px #eee;
padding: 6px 10px;
text-align: left;
}
._drag-item:hover {
cursor: move;
}
._drag-item + ._drag-item {
margin-top: 10px;
}
._ghost {
border: solid 1px rgb(19, 41, 239);
}
._chosenClass {
background-color: #f1f1f1;
}
</style>
5. 最终效果
更多推荐
已为社区贡献1条内容
所有评论(0)