vue3 draggable拖拽

！！首先安装 vuedraggable

 npm i -S vuedraggable@next

一定要带上@next，不然就会报错很恶心！使用建议看官网。

官网：vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html

example：

<script setup lang="ts">
import draggable from "vuedraggable";
import { ref } from "vue";type firdType = { grid: string; num: number };
const gridLists = ref<Array<firdType>>([{ grid: "cn", num: 1 },{ grid: "cn", num: 2 },{ grid: "cn", num: 3 },{ grid: "cn", num: 4 },{ grid: "cn", num: 5 },{ grid: "cn", num: 6 },{ grid: "cn", num: 7 },{ grid: "cn", num: 8 },{ grid: "cn", num: 9 },
]);
type listsType = {people:string,id:number,name:string
}
const  lists = ref<Array<listsType>>([{ people: "cn", id: 1, name: "www.itxst.com" },{ people: "cn", id: 2, name: "www.baidu.com" },{ people: "cn", id: 3, name: "www.taobao.com" },{ people: "cn", id: 4, name: "www.google.com" }
]);
const drag = ref(false);
const getEend = (e) => {console.log(e);
};
</script>
<template><div class="drag-container"><el-row :gutter="20"><el-col :xs="25" :sm="8" :md="8" :lg="8"><el-card><template #header><div class="card-header"><span>grid列表拖拽</span></div></template><draggablev-model="gridLists"item-key="id"animation="300"chosenClass="chosen"forceFallback="true"class="grid-container"@change="getEend"><template #item="{ element }"><div :class="'item' + ' ' + 'item-' + element.num">{{ element.num }}</div></template></draggable></el-card></el-col>      <el-col :xs="25" :sm="8" :md="8" :lg="8"><el-card><template #header><div class="card-header"><span>grid列表拖拽</span></div></template><!-- 单列拖拽 --><draggablev-model="lists"item-key="name"@change="getEend"chosen-class="chosen"force-fallback="true"animation="300"><template #item="{ element, index }"><div class="item-single">{{ element.name }} {{ index }}</div></template></draggable></el-card></el-col></el-row></div>
</template><style scoped lang="scss">
/* grid列表拖拽 */
.grid-container {display: grid;grid-template-columns: 33.3% 33.3% 33.3%;grid-template-rows: 33.3% 33.3% 33.3%;
}.item {font-size: 2em;text-align: center;line-height: 100px;border: 1px solid #e5e4e9;cursor: move;
}.item-1 {background-color: #ef342a;
}.item-2 {background-color: #f68f26;
}.item-3 {background-color: #4ba946;
}.item-4 {background-color: #0376c2;
}.item-5 {background-color: #c077af;
}.item-6 {background-color: #f8d29d;
}.item-7 {background-color: #b5a87f;
}.item-8 {background-color: #d0e4a9;
}.item-9 {background-color: #4dc7ec;
}
.chosen {border: solid 2px #137fde !important;
}.item-single {font-size: 1.5em;height: 77px;text-align: center;line-height: 85px;border: 1px solid #e5e4e9;cursor: move;
}</style>

vue3 draggable拖拽相关推荐

vue.draggable 拖拽 ant 组件布局
vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vu ...
vue3 组件拖拽小案例
vue3 实现组件拖拽小案例一.实现效果将不同组件拖拽至展示区展示拖拽前拖拽后,取消后还原(没有动态演示真抱歉) 二.实现过程页面基本样式 <template><div c ...
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
Draggable拖拽+Collapse使用（不一样的手风琴）
插件地址:vuedraggable - npm npm-Draggable插件:vuedraggable 领导前两天给了一个数据结构,根据根据这个数据结构来构建界面. 效果图现有数据结构 data: ...
Vue3实现拖拽定制化首页
大家好,我是王大傻.最近呢,写了一个定制化拖拽首页的功能,借此来讲一下心得. 前期准备 Vue3 Ts VueDragable (4版本以上) 期望拖拽组件组件可以按需加载导入开始首先呢,我们 ...
draggable拖拽组件使用
项目开发中需要用到拖拽组件,因为前端技术框架是vue,这里就使用了vue的一款拖拽插件vue.draggable,一般基本的需求都能满足,这里使用了多个draggable嵌套,达到两级之前相互拖拽的功 ...
Draggable拖拽
由于目前所在的公司做的是学校管理的项目,功能中就包含课程表定制,学生排序,邮箱回执插入等,都需要用到拖拽的功能,以下就介绍下项目中用的draggable实现的拖拽排序实现效果图功能描述:搜索框输入 ...
draggable拖拽组件的使用
背景:左右两个数据栏,左侧为数据源,右侧为组建的目标数据.要实现左侧和右侧可以互相拖拽,但是左侧拖拽到右侧后源数据不变,右侧拖拽到左侧时,无论丢在左侧哪里都回到源数据原来的分组下:并且,左侧和右侧内部 ...
HTML5 draggable 拖拽实例
HTML5 draggable <!DOCTYPE html> <html lang="en"> <head><meta charset= ...

vue3 draggable拖拽

！！首先安装 vuedraggable

example：

vue3 draggable拖拽相关推荐

最新文章

热门文章