位置: IT常识 - 正文

vuedraggable的使用(vuedraggable官方文档)

编辑:rootadmin
vuedraggable的使用

推荐整理分享vuedraggable的使用(vuedraggable官方文档),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue drag,vuedraggable教程,vuedraggable参数配置,vuedraggable官方文档,vuedraggable原理,vuedraggable教程,vuedraggable原理,vue dragable,内容如对您有帮助,希望把文章链接给更多的朋友!

官网地址: https://www.npmjs.com/package/vuedraggable https://github.com/SortableJS/Vue.Draggable

效果:https://sortablejs.github.io/Vue.Draggable/#/custom-clone Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。

一.安装

npm i -S vuedraggable

或者引入:

二.使用1.场景:单个列表内部简单的拖拽(不克隆)<template> <div class="twoPage"> <draggable :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost" :move="checkMove" @start="dragging = true" @end="dragging = false"> <div class="list-group-item" v-for="element in list" :key="element.name"> {{ element.name }} </div> </draggable> </div></template><script>import draggable from "vuedraggable";export default { data() { return { enabled: true, list: [ { name: "1 - John", id: 0 }, { name: "2 - Joao", id: 1 }, { name: "3 - Jean", id: 2 } ], dragging: false }; }, components:{ draggable }, mounted() { }, methods: { checkMove: function(e) { window.console.log("Future index: " + e.draggedContext.futureIndex); } }};</script><style lang="less">.ghost { opacity: 0.5; background: #c8ebfb;}.list-group{ display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; width: 300px; .list-group-item{ cursor: move; position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0,0,0,.125); }}</style>vuedraggable的使用(vuedraggable官方文档)

效果如下:

2.场景:两个列表间的拖拽(不克隆)

左边往右边拖拽,拖过来一个,左边就少一个,右边就会多一个

<template> <div class="twoPage"> <div class="el-row"> <div class="el-col" :span="12"> <h3>Draggable 1</h3> <draggable class="list-group" :list="list1" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> <div class="el-col" :span="12"> <h3>Draggable 2</h3> <draggable class="list-group" :list="list2" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in list2" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> </div> </div></template><script>import draggable from "vuedraggable";export default { data() { return { list1: [ { name: "list1 - 1:John", id: 1 }, { name: "list1 - 2:Joao", id: 2 }, { name: "list1 - 3:Jean", id: 3 }, { name: "list1 - 4:Gerard", id: 4 } ], list2: [ { name: "list2 - 1:Juan", id: 5 }, { name: "list2 - 2:Edgard", id: 6 }, { name: "list2 - 3:Johnson", id: 7 } ] }; }, components:{ draggable }, mounted() { }, methods: { log: function(evt) { window.console.log(evt); } }};</script><style lang="less">.ghost { opacity: 0.5; background: #c8ebfb;}.list-group{ display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; width: 300px; .list-group-item{ cursor: move; position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0,0,0,.125); }}</style>

options配置项, sort:false 表示拖动时禁止其进行排序操作 group: {name: ‘field’, pull: ‘clone’, put: false} 表示进行克隆拖动操作,并且该name和拖动的目标位置group名称一致,如右侧draggable标签的group同样为field draggable=“.item” 将可拖动属性下放到每一个按钮下

3.场景:两个列表间的拖拽(克隆)

效果:左边往右边拖拽,拖过来一个,左边不会少,但右边就会多一个,相当于复制。

代码场景2的区别在于: :group="{ name: 'people', pull: 'clone', put: false }":表示可拖拽克隆出去,但不接收外面拖拽过来的 group="people":简单的内部拖拽

<template> <div class="twoPage"> <div class="el-row"> <div class="el-col" :span="12"> <h3>Draggable 1</h3> <draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: false }" @change="log"> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> <div class="el-col" :span="12"> <h3>Draggable 2</h3> <draggable class="list-group" :list="list2" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in list2" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> </div> </div></template><script>import draggable from "vuedraggable";export default { data() { return { list1: [ { name: "list1 - 1:John", id: 1 }, { name: "list1 - 2:Joao", id: 2 }, { name: "list1 - 3:Jean", id: 3 }, { name: "list1 - 4:Gerard", id: 4 } ], list2: [ { name: "list2 - 1:Juan", id: 5 }, { name: "list2 - 2:Edgard", id: 6 }, { name: "list2 - 3:Johnson", id: 7 } ] }; }, components:{ draggable }, mounted() { }, methods: { log: function(evt) { window.console.log(evt); } }};</script><style lang="less">.ghost { opacity: 0.5; background: #c8ebfb;}.list-group{ display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; width: 300px; .list-group-item{ cursor: move; position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0,0,0,.125); }}</style>

效果和场景2一样

4.场景:两个列表间的拖拽-自定义克隆(克隆)

:clone="cloneDog" 这个方法自定义克隆

<template> <div class="twoPage"> <div class="el-row"> <div class="el-col" :span="12"> <h3>Draggable 1</h3> <draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: true }" @change="log" :clone="cloneDog"> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> <div class="el-col" :span="12"> <h3>Draggable 2</h3> <draggable class="list-group" :list="list2" :group="{ name: 'people', pull: 'clone', put: true }" @change="log"> <div class="list-group-item" v-for="(element, index) in list2" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> </div> </div></template><script>import draggable from "vuedraggable";export default { data() { return { list1: [ { name: "list1 - 1:John", id: 1 }, { name: "list1 - 2:Joao", id: 2 }, { name: "list1 - 3:Jean", id: 3 }, { name: "list1 - 4:Gerard", id: 4 } ], list2: [ { name: "list2 - 1:Juan", id: 5 }, { name: "list2 - 2:Edgard", id: 6 }, { name: "list2 - 3:Johnson", id: 7 } ] }; }, components:{ draggable }, mounted() { }, methods: { log: function(evt) { window.console.log(evt); }, cloneDog({ id }) { return { id: 8, name: 'cat' }; } }};</script><style lang="less">.ghost { opacity: 0.5; background: #c8ebfb;}.list-group{ display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; width: 300px; .list-group-item{ cursor: move; position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0,0,0,.125); }}</style>
本文链接地址:https://www.jiuchutong.com/zhishi/294488.html 转载请保留说明!

上一篇:合宙AIR32F103CBT6刷回CMSIS-DAP固件和DAP升级固件以及刷ST-LINK V2-1固件方法(合宙air32f103 stlink)

下一篇:CVPR2023(cvpr2023最佳论文)

  • 公车私车税收区别
  • 合伙企业转让股权如何缴税
  • 支付城镇土地使用税会计科目
  • 原材料的采购成本包括运费吗
  • 个体工商户税务申报一年几次
  • 一般纳税人开劳务专票多少个点
  • 如何查询继续教育证书
  • 贴现的日期怎么算
  • 铲车用什么燃油
  • 劳保费属于什么会计科目
  • 小企业会计准则会计科目表
  • 营业外支出计入
  • 工程检测费占工程金额多少
  • 进口产品再销售如何缴税
  • 化工类资质建筑企业有哪些
  • 公积金账户收入
  • 个体户地税怎么收费
  • 手撕发票流程
  • 健身房属于什么经营类别
  • 企业所得税多交了必须退税吗
  • 外币出资汇率变动会计处理
  • 应交增值税是总额吗
  • 小规模企业增值税税率是多少
  • 交上年企业所得税怎么做会计分录
  • 环保税与排污费的联系
  • 债券转换为普通债权
  • 一品红怎么养才长得好
  • 出租经营的开发产品应视为企业的
  • 差旅费报销会计处理
  • 客户多付款入哪个科目
  • php 取字符串 前几位
  • Anaconda(python,pycharm)半详细安装教程
  • 深度学习数据集—水果数据集大合集
  • netbeans for php
  • 销售商品的折扣
  • SQL Server 使用 SET FMTONLY ON 获得表的元数据
  • 用友要怎么删除凭证
  • 销售折扣购物卡对公司财务的好处
  • 资产减值准备如何影响利润
  • 补贴收入是否交印花税
  • 经营性应付项目包括哪些内容
  • 机会成本的特点有()
  • 过渡期补贴是什么意思
  • 销项负数发票给谁
  • 汇算清缴退税分录怎么做
  • 中小微企业有哪些企业
  • 出口退税包括
  • 发票具有哪些情况可以开
  • 投资收益余额在贷方怎么结转
  • 固定资产折旧计算表模板
  • 哪些减值准备一经计提不得转回
  • 医院药品过期放多久
  • 办公用水电费计入什么科目
  • 错误的英文
  • vc6_cn_full.exe
  • 文件夹隐藏属性怎么弄
  • ubuntu系统安装报错
  • windows画图程序名
  • win8.1系统HDMI高清线连接电视后没有声音的原因及解决办法
  • win10计算机管理器
  • linux添加启动
  • win7集成补丁教程
  • 修改注册表命令
  • unity 读取xml文件
  • Node.js connect ECONNREFUSED错误解决办法
  • javascript运用
  • unity3d总结
  • 批处理检查输入文本是否为字母或数字
  • js移动到指定位置
  • 我的自定义计划怎么删除
  • nodejs音乐播放器
  • js实现下载
  • 厂房转让的土地税怎么算
  • 怎样看业务序号
  • 小规模纳税人销售额怎么算
  • 锂电池税收优惠政策
  • 宁波国税发票查询
  • 云旅游存在的问题及解决措施
  • 税务局监控个人账户流程
  • 河北税务怎么打不开网页
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设