vue3使用vuedraggable实现拖拽

1、npm i vuedraggable -S，使用这个命令，vue3会报错，如下图

2、使用npm uninstall vuedraggable -S 卸载，再使用npm i -S vuedraggable@next下载最新版

3、vue使用代码如下：

<template><div><h1 class="title">拖拽</h1><draggableclass="wrapper"v-model="list"@start="drag = true"@end="drag = false"item-key="index"><template #item="{ element }"><div class="item"><p>{{ element }}</p></div></template></draggable></div>
</template><script>
import { reactive, toRefs, onMounted } from 'vue'
import draggable from 'vuedraggable'export default {name: 'dragAndDrop',components: { draggable },setup () {const state = reactive({drag: false,list: [1, 2, 3, 4, 5, 6]})onMounted(() => {})return {...toRefs(state)}}
}
</script><style scoped>
.title {text-align: center;color: #42b983;
}
.wrapper {display: flex;justify-content: center;width: 100%;
}
.item {width: 100px;height: 100px;font-size: 50px;text-align: center;line-height: 100px;margin: 10px;background-color: #42b983;color: #ffffff;
}
</style>

4、效果如下图

vue3使用vuedraggable实现拖拽相关推荐

vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
element-tiptap和vuedraggable的拖拽冲突
今天写项目的时候,遇到一个问题,分享给大家. 场景我有一个A区域,还有一个B区域.A区域内的Vue组件可以通过Vuedraggable这个框架来拖拽到B区域中.B区域内的Vue组件在标题上使用了el ...
vuedraggable嵌套块拖拽_Vue 基于 vuedraggable 实现选中、拖拽、排序效果
今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动. 其实我之前基于 Sortable 做过一个类似的效果.也给他看过了,没看太明白,他就 ...
如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
最近几天在研究有关vue实现拖拽的功能,不过跟一般的拖拽排序有点不同,这个需求可能出现多行多列嵌套的表单元素,数据也是递归形式的出现.我也是在vuedraggable的基础上扩展实现的,如何想了解更多 ...
vue+sortable实现表格拖拽
vue+sortable实现表格拖拽前言: 支持 vue3.0 支持表格拖拽支持自定义拖拽 sortable官网一.下载 sortable npm install sortablejs --sa ...
Element UI表格拖拽（vue中） —— 行拖拽、列拖拽
目录安装依赖 vuedraggable 实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vuedraggable 安装 vuedraggable 的同时,会自动安装 sortabl ...
vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
vuedraggable实现组件拖拽，页面生成器？
使用H5的draggable="true"虽然可以实现拖拽,但如果是在vue中使用,我们需要去封装,虽然不难,但是有成熟的轮子为什么不用呢? 在vue中实现拖拽可以使用vuedra ...
vue3TS+Jsplumb+vuedraggable拖拽插件使用记录
安装拖拽插件 vue3需下载-@next此版本,否则会出现错误 npm i -S vuedraggable@next npm install sortablejs --save //拖拽组件依赖sor ...

vue3使用vuedraggable实现拖拽

vue3使用vuedraggable实现拖拽相关推荐

最新文章

热门文章