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"><draggableitem-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: numbername: 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. 最终效果

Vue3使用拖拽插件 - vuedraggable相关推荐

vue3TS+Jsplumb+vuedraggable拖拽插件使用记录
安装拖拽插件 vue3需下载-@next此版本,否则会出现错误 npm i -S vuedraggable@next npm install sortablejs --save //拖拽组件依赖sor ...
【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
vue3 draggable拖拽
!!首先安装 vuedraggable npm i -S vuedraggable@next 一定要带上@next,不然就会报错很恶心!使用建议看官网. 官网:vue.draggable中文文档 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
java se拖动插件_JQuery之拖拽插件
Jeremy - DragDrop Test !(function($) { $.extend({//获取鼠标当前坐标mouseCoords:function(ev){if(ev.pageX||ev. ...
拖拽插件jquery.dad.js
带删除功能: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
java se拖动插件_JQuery之拖拽插件实现代码
而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了: ...
js 拖拽生成html,js拖拽插件 js 拖拽控件生成自定义表单怎么实现
想请教一个js的问题,拖拽控件 js 拖拽控件生成自定义表单怎么实现说说步骤吧监听mousedown事件 - 获取鼠标点击元素,判断是否可拖拽 - 设置flag做标记 - 建一个tempDOM, ...
Vue拖拽插件（vuedraggable）
参考文档: vue.draggable disabled 开启和禁用拖动 - itxst.com 效果如下图: ① 安装插件:yarn add vuedraggable ②引入插件并使用: <t ...

Vue3使用拖拽插件 - vuedraggable

1. 安装

2. 导入

3. 基本使用

4. 完整示例-复制即可使用

5. 最终效果

Vue3使用拖拽插件 - vuedraggable相关推荐

最新文章

热门文章