当前位置: 首页 > news >正文

vue2 中如何使用 vuedraggable 库实现拖拽功能

1.通过 npm 或 yarn 安装 vuedraggable 库

npm install vuedraggableyarn add vuedraggable

2. 引入组件内部使用,以下代码是一个Demo,可直接复制粘贴演示

注意:因项目使用了 vant,需要安装 vant 才能正常运行

<template><div class="wrapper"><van-nav-bar title="生产订单" left-arrow @click-left="onLeftClick" /><div class="page_bg"><div style="display: flex; justify-content: center"><van-list class="list_wrap myStyle" :loading="loading" :finished="finished" @load="onLoad"><van-cell class="cell_item" v-for="(item, index) in dataList" :key="index"><span class="sign"></span><div class="mystyle"><div>销售订单:{{ item.BillNo }}</div></div><div class="table_wrap" style="z-index: 999"><draggable class="list-group" :list="item.Entries" item-key="id" group="people" @change="onChange1"><div v-for="(items, indexs) in item.Entries" :key="indexs" style="padding: 10px"><div>{{ items }}</div></div></draggable></div></van-cell></van-list><van-list style="width: 50vw; margin-right: 10px" :loading="loading" :finished="finished" @load="onLoad"><van-cell class="cell_item myCell"><van-dropdown-menu><van-dropdown-item v-model="currentValue" :options="newList" /><van-button style="position: absolute; top: 12px; right: 15px; width: 100px; height: 55px; z-index: 999999999" type="info" size="small">提交</van-button></van-dropdown-menu><div class="table_wrap" style="height: 275px"><draggable class="list-group" :list="listObj.Entries" item-key="id" group="people" @change="onChange2"><div v-for="(items, index) in listObj.Entries" :key="index" style="padding: 10px"><div>{{ items }}</div></div></draggable></div></van-cell></van-list></div></div></div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {name: 'productlist',components: { Draggable },data() {return {loading: false,finished: true,isLoad: false,dataList: [],newList: [{ text: '1号线', value: 0 },{ text: '2号线', value: 1 },{ text: '3号线', value: 2 },{ text: '4号线', value: 3 }],currentValue: 0,listObj: {BillNo: '1号线',Entries: []}};},mounted() {this.userInfo = JSON.parse(localStorage.getItem('userInfo'));this.onSearchClick();},methods: {onLeftClick() {this.$router.push('/');},onLoad() {if (this.isLoad) {this.page++;this.onSearchClick();}},async onSearchClick() {this.dataList = [{BillNo: 'XSDD01',Entries: ['物料:屏幕;客户:山东', '物料:手机;客户:四川', '物料:电脑;客户:河南', '物料:机箱;客户:北京']}];},onChange1(evt) {console.log('数据列表:', evt);},onChange2(evt) {console.log('响应列表:', evt);}}
};
</script>
<style scoped>
::v-deep .van-popup--top {--dynamic-width: 50vw;left: calc(var(--dynamic-width) + 5px);width: calc(var(--dynamic-width) - 10px);
}
.list_wrap.scroll_div {max-height: calc(100vh - 123px);
}
.custom-width {min-width: 200px;
}
.customWidth {min-width: 100px;
}
.myStyle {width: 50vw;padding: 0 5px;font-size: 12px !important;
}
.myCell {margin: 0 5px 0 0;
}
::v-deep .van-dropdown-menu__bar {position: relative;height: 40px;border-bottom: 1px solid #e5e5e5;
}
::v-deep .van-dropdown-menu__title--active,
::v-deep .van-dropdown-item__option--active .van-dropdown-item__icon,
::v-deep .van-dropdown-item__option--active {color: #0860b9;
}
::v-deep .van-overlay {background-color: rgba(0, 0, 0, 0);
}::v-deep .van-dropdown-menu__item {justify-content: left;
}
</style>

3.友情提示,这个库使用方法其实很简单,因为看别人写的比较复杂,自己才写一个Demo 供大家理解,其实这个库中,最重要的就是这个属性 group="people" ,它决定了哪些组件可以相互拖拽,就相当于一个 key,相同 key 的可以相互拖拽。

http://www.lryc.cn/news/389731.html

相关文章:

  • 0基础学C++ | 第13天 | 基础知识 | 类 | 对象
  • Java | Leetcode Java题解之第212题单词搜索II
  • Flink面试题总结
  • 人工智能与云计算
  • 9.(vue3.x+vite)修改el-input,el-data-picker样式
  • java反射和注解
  • react_后台管理_项目
  • 【C语言】使用C语言编写并使用gcc编译动态链接库
  • 使用supportFragmentManager管理多个fragment切换
  • 开源模型应用落地-FastAPI-助力模型交互-WebSocket篇(六)
  • 独立开发者系列(17)——MYSQL的常见异常整理
  • 【ajax实战02】数据管理网站—验证码登录
  • 人工智能在反无人机中的应用介绍
  • 【力扣 - 每日一题】3115. 质数的最大距离(一次遍历、头尾遍历、空间换时间、埃式筛、欧拉筛、打表)Golang实现
  • 【Gin】项目搭建 一
  • C++ 和C#的差别
  • Vue2组件传值(通信)的方式
  • 【数据结构 - 时间复杂度和空间复杂度】
  • telegram支付
  • elasticsearch-6.8.23的集群搭建过程
  • javascript输出语法
  • 仓库管理系统26--权限设置
  • d3dx9_43.dll丢失怎么解决?d3dx9_43.dll怎么安装详细教程
  • [C++] 退出清理函数解读(exit、_exit、abort、atexit)
  • 代码随想录(回溯)
  • 编译原理1
  • 【信息系统项目管理师知识点速记】组织通用管理:流程管理
  • 前端 JS 经典:箭头函数的意义
  • Java List操作详解及常用方法
  • 《mysql篇》--查询(进阶)