位置: IT常识 - 正文

vue 拖拽(Vue 拖拽排序)

编辑:rootadmin
1、左右容器拖拽 2、容器内位置拖拽切换 3、判断性拖拽(若不适配,鼠标显示禁止拖拽图标) 4、点击大标题,变输入框修改,最后提交表单 <template> <div> <div class="left_list"> <div class="_flex"> <transition-group tag ... 1、左右容器拖拽2、容器内位置拖拽切换3、判断性拖拽(若不适配,鼠标显示禁止拖拽图标)4、点击大标题,变输入框修改,最后提交表单

<template> <div> <div class="left_list"> <div class="_flex"> <transition-group tag="div"> <div class="item list_wrap" :class="'item' + index" v-for="(item, index) in dataList" :key="index" v-if="item.key!='box'" @drop='onDrop($event, item.key)' @dragover.prevent="dragOver($event, item,index)" @dragenter.prevent > <h2 v-on:dblclick="editTitle(index,true)" v-show="!item.showTitleEdit">{{ item.title }}</h2> <Input v-model="item.title" :autofocus="true" :ref="'editInput'+index" v-show="item.showTitleEdit" @on-blur="editTitle(index,false)"/> <p v-if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index" draggable="true" @dragstart="handleDragStart($event, item,index,_index)" @dragover.prevent="handleDragOver($event, item,index,_index)" @dragenter="handleDragEnter($event, item,index,_index)" @dragend="handleDragEnd($event, item,index,_index)"> {{ row.lable }} <Icon @click="deleteItem(index,_index)" type="md-close-circle"/> </p> </div> </transition-group> </div> <div class="_flex"> <transition-group tag="div"> <div class="item list_wrap" :class="'item' + index" v-for="(item, index) in dataList" :key="index" v-if="item.key=='box'" @drop='onDrop($event, item.key)' @dragover.prevent="dragOver($event, item,index)" @dragenter.prevent > <h2 v-on:dblclick="editTitle(index,true)" v-show="!item.showTitleEdit">{{ item.title }}</h2> <Input v-model="item.title" :autofocus="true" :ref="'editInput'+index" v-show="item.showTitleEdit" @on-blur="editTitle(index,false)"/> <p v-if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index" draggable="true" @dragstart="handleDragStart($event, item,index,_index)" @dragenter="handleDragEnter($event, item,index,_index)" @dragend="handleDragEnd($event, item,index,_index)"> {{ row.lable }} <Icon @click="deleteItem(index,_index)" type="md-close-circle"/> </p> </div> </transition-group> </div> </div> <div class="right_list"> <h1>检测限</h1> <div class="_list" v-for="(item,index) in rightList" :key="index"> <h2>{{ item.title }}</h2> <p v-if="item.children&&item.children.length>0" v-for="(row,_index) in item.children" :key="_index" draggable @dragstart='startDrag($event, item,index,_index)' @dragend="dragEnd($event, item,index,_index)">{{ row.lable }}</p> </div> </div> <Button @click="getD">按钮</Button> </div></template><script>export default { name: 'test2', data () { return { dataList: [ { title: '电源状态', key: 'power', showTitleEdit: false, children: [{lable: '电压(V)'}, {lable: '总电量'}, {lable: '电流(A)'}, {lable: '电压故障次数'}, {lable: '漏电流(mA)'}, {lable: '电流故障次数'}] }, { title: '环境', key: 'surroundings', showTitleEdit: false, children: [{lable: '温度1'}, {lable: '温度2'}, {lable: '湿度'}, {lable: '雷击次数'}] }, { title: 'IO输出', key: 'IOOutput', showTitleEdit: false, children: [{lable: '主继电器'}, {lable: '报警'}, {lable: 'LED'}, {lable: '风扇'}, {lable: '频闪灯'}] }, { title: '箱体布防状态', key: 'box', showTitleEdit: false, children: [{lable: '空开检测'}, {lable: '压敏监测'}, {lable: '门磁监测'}, {lable: '倾斜监测'}, {lable: '水浸监测'}, {lable: '雷击监测'}] } ], rightList: [ { title: 'IO输入', key: 'surroundings', children: [{lable: '电压11111'}, {lable: '总电量1111'}, {lable: '电流111(A)'}, {lable: '电压故障次数1111'}, {lable: '漏电流111(mA)'}, {lable: '电流故障次数111'}] }, { title: '模拟量', key: 'box', children: [{lable: '温度133333'}, {lable: '温度233333'}, {lable: '湿度33333'}, {lable: '雷击次数33333'}] }, { title: '电压值', key: 'power', children: [{lable: '主继电器2222'}, {lable: '报警2222'}, {lable: 'LED222'}, {lable: '风扇2222'}, {lable: '频闪灯222'}] } ], ending: null, dragging: null, newDrag: true, parentDragging: null } }, methods: { // 父拖动 startDrag (event, item, index, _index) { event.dataTransfer.dropEffect = 'move' event.dataTransfer.effectAllowed = 'move' this.newDrag = true this.parentDragging = Object.assign({}, item, {itemIndex: index, rowIndex: _index}) this.dragging = null this.ending = null }, dragOver(event, item, index) { // event.dataTransfer.dropEffect = 'move' if (this.newDrag) { //判断父类移入 event.dataTransfer.dropEffect = this.parentDragging.key == item.key ? 'move' : 'none' } }, dragEnd (event, item, index, _index) { this.newDrag = true }, onDrop (event, list) { if (list == this.parentDragging.key) { for (let item of this.dataList) { if (item.key == this.parentDragging.key) { item.children.push(this.rightList[this.parentDragging.itemIndex].children[this.parentDragging.itemIndex]) break } } } else { if (this.newDrag) { // 不是左边拖动 this.$Message.error('当前key不是同一个') } } }, // 子拖动 handleDragStart (e, item, index, _index) { this.newDrag = false this.parentDragging = null this.dragging = Object.assign({}, item, {index: index, _index: _index}) }, handleDragEnd (e, item) { if (this.ending.key != this.dragging.key) { return } let sourceIndex = this.dragging._index let targetIndex = this.ending._index let parentInex = this.dragging.index this.dataList[parentInex].children[sourceIndex] = this.dataList[parentInex].children.splice(targetIndex, 1, this.dataList[parentInex].children[sourceIndex])[0] }, handleDragOver (e, item, index, _index) { // e.dataTransfer.dropEffect = 'move' //判断子类移入 if (this.dragging) { if (this.ending.key != this.dragging.key) { e.dataTransfer.dropEffect = 'none' } else { e.dataTransfer.dropEffect = 'move' } } }, handleDragEnter (e, item, index, _index) { // 为需要移动的元素设置dragstart事件 e.dataTransfer.effectAllowed = 'move' this.ending = Object.assign({}, item, {index: index, _index: _index}) }, editTitle (index, bool) { this.dataList[index].showTitleEdit = bool this.$nextTick(() => { this.$refs['editInput' + index][0].focus() }) }, deleteItem (index, rowIndex) { this.dataList[index].children.splice(rowIndex, 1) }, getD () { console.log(this.dataList) } }}</script><style scoped lang="less">.right_list, .left_list { width: 49%; padding: 10px; display: inline-block; vertical-align: top; h2 { font-size: 1.5em; margin: 20px 20px 10px; } p { padding: 10px; display: inline-block; width: 48%; text-align: center; cursor: pointer; }}.left_list { background: #bcf5de; ._flex { margin: 10px; display: inline-block; width: 45%; vertical-align: top; } .list_wrap { margin-bottom: 10px; border: 1px solid red; }}.right_list { background: #fdbfab;}</style>

推荐整理分享vue 拖拽(Vue 拖拽排序),希望有所帮助,仅作参考,欢迎阅读内容。

vue 拖拽(Vue 拖拽排序)

文章相关热门搜索词:vue拖拽组件生成前端页面,vue拖拽组件生成前端页面,Vue 拖拽排序,vue拖拽组件,vue 拖拽上传,vue拖拽插件,vue拖拽功能的实现,vue拖拽组件,内容如对您有帮助,希望把文章链接给更多的朋友!

View Code

本文链接地址:https://www.jiuchutong.com/zhishi/310412.html 转载请保留说明!

上一篇:vue3和vue2 的区别,vue3和vu2到底哪个好呢?(vue2跟vue3)

下一篇:爬虫系统研发工程师(爬虫工程师简介)

  • 利率 税率
  • 财会英语汇总:税收术语?
  • 经营性收入包括投资收益吗
  • 简易计税开的发票可以抵扣吗
  • 高新技术认定标准条件是什么
  • 编制初始计量有什么要求
  • 小规模纳税人可以开1%的专票吗
  • 企业所得税大白话解释
  • 个人自产自销农产品免税政策
  • 一般纳税人临时工工资怎么入账
  • 价外补贴需要交增值税吗
  • 处置固定资产增值税和所得税报税能一致吗
  • 餐饮行业享受免增值税政策怎么开发票
  • 专票信息内容
  • 领购增值税专用发票
  • 跨年发票能否次年入账
  • 交股权印花税需要什么材料
  • 酒店式公寓配套服务包括哪些
  • 应收账款确认无法收回
  • 外购无形资产的成本包括进口关税吗
  • 多交附加税不退怎么做分录
  • 1697508857
  • 发票已开货没发出的账务处理?
  • 已发货未开票的货物需要结转成本吗
  • window10永久
  • 小规模纳税人安装费税率
  • 代理进口货物账务怎么处理
  • php字符串定义
  • 补缴社保公积金申请书怎么写
  • 既征收消费税又征收增值税的是
  • linux小技巧
  • 应收账款保理的主要意图在于
  • 财务费用属于期间汇转账户吗
  • 单位管理费用核算
  • pavkre.exe - pavkre是什么进程 作用是什么
  • thinkphp获取数据库数据
  • python进行数学建模
  • stp 命令
  • 一般股份支付的确认计量及帐务处理怎么做?
  • 现金流量表和资产负债表的区别
  • php安装不了
  • dedecms主页修改
  • 小规模纳税企业销售货物或者提供应税劳务
  • 光盘盒属于什么税收分类
  • 关于企业停工停产期间的工资支付有关规定
  • 企业主营业务利润是由什么构成的
  • 公司缴纳残保金查询怎么查
  • 应收账款和应付账款属于什么科目
  • 本月发生费用未支付会计处理
  • 新开企业如何开发票
  • 不确认销售收入的原因
  • 样品费计入
  • 计提税金用什么附件
  • 速动比率和流动比率怎么分析
  • 营利性养老机构有补贴吗
  • 城建税教育费附加什么时候交
  • 两个其他应收款的区别
  • 存货的发出计价方法有哪些
  • 农产品怎么自产自销
  • 施工单位购买材料能直接进成本吗
  • 远期支票可以背书转让吗
  • 附加税减半征收从什么时候开始
  • 银行手续费没拿可以退吗
  • 企业工资薪金支出怎么确认
  • 工程施工会计科目及账务处理
  • 在sql server中关于数据库的说法正确的是
  • win7激活2020
  • javascript学习指南
  • ftp下载工具能自动登录ftp服务器
  • python 入门指南
  • angularjs2
  • javascript如何
  • js的异步事件循环机制
  • js实现功能
  • js的scrolltop
  • 编写python程序的步骤
  • python中input的用法
  • 纳税服务投诉工作要求
  • 纳税申报的具体内容
  • 小规模六税两费减免分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设