位置: 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)

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

  • 怎样利用宝贝详情内页的优化提升转化率(怎么设计宝贝详情图)

    怎样利用宝贝详情内页的优化提升转化率(怎么设计宝贝详情图)

  • 磁盘写保护怎么去掉(磁盘写保护怎么去掉)(磁盘写保护怎么去掉写保护)

    磁盘写保护怎么去掉(磁盘写保护怎么去掉)(磁盘写保护怎么去掉写保护)

  • 网易云音乐一起听歌暂停对方会不会暂停(网易云音乐一起听记录在哪里看)

    网易云音乐一起听歌暂停对方会不会暂停(网易云音乐一起听记录在哪里看)

  • qq活跃度在哪里看(qq活跃度在哪里看手机)

    qq活跃度在哪里看(qq活跃度在哪里看手机)

  • QQ浏览器文件怎么编辑(qq浏览器文件怎么写字)

    QQ浏览器文件怎么编辑(qq浏览器文件怎么写字)

  • 迅捷路由器管理员密码是什么(迅捷路由器管理地址)

    迅捷路由器管理员密码是什么(迅捷路由器管理地址)

  • 六类网线和超六类网线的区别(六类网线和超六类网线的水晶头区别)

    六类网线和超六类网线的区别(六类网线和超六类网线的水晶头区别)

  • vivo安全模式在哪里开(vivo安全模式在哪里)

    vivo安全模式在哪里开(vivo安全模式在哪里)

  • 闲鱼买家加微信不通过为什么(闲鱼买家加微信的目的)

    闲鱼买家加微信不通过为什么(闲鱼买家加微信的目的)

  • 一个手机登录两个快手号有影响吗(一个手机登录两个抖音号会有影响吗)

    一个手机登录两个快手号有影响吗(一个手机登录两个抖音号会有影响吗)

  • 苹果7p能升级到13.4.1吗(苹果7p能升级到13吗)

    苹果7p能升级到13.4.1吗(苹果7p能升级到13吗)

  • 微信2个人怎么无法建群(微信2个人怎么玩拼手气红包)

    微信2个人怎么无法建群(微信2个人怎么玩拼手气红包)

  • qq文件存到微云怎么查看(qq文件存到微云占内存吗)

    qq文件存到微云怎么查看(qq文件存到微云占内存吗)

  • sip通话功能什么意思

    sip通话功能什么意思

  • 为什么苹果11网络那么慢(为什么苹果11网络那么卡)

    为什么苹果11网络那么慢(为什么苹果11网络那么卡)

  • uc网盘是什么东西(uc网盘是什么东西个个月扣钱怎么回事)

    uc网盘是什么东西(uc网盘是什么东西个个月扣钱怎么回事)

  • 苹果x为什么充不进去电(苹果x为什么充电充到80自己停了)

    苹果x为什么充不进去电(苹果x为什么充电充到80自己停了)

  • word页码全是1怎么连续(word2016页码都是1)

    word页码全是1怎么连续(word2016页码都是1)

  • mts文件怎么打开(手机上怎么把mts转换成mp4)

    mts文件怎么打开(手机上怎么把mts转换成mp4)

  • 手机怎么设置自动关机(手机怎么设置自动重拨电话)

    手机怎么设置自动关机(手机怎么设置自动重拨电话)

  • 华为mate30送手机壳吗(华为mate30送的手机壳怎么样)

    华为mate30送手机壳吗(华为mate30送的手机壳怎么样)

  • 电话未接通是什么意思(拨打电话未接通)

    电话未接通是什么意思(拨打电话未接通)

  • 小米5屏幕参数(小米5屏幕参数配置)

    小米5屏幕参数(小米5屏幕参数配置)

  • 刚打电话就显示通话结束(打电话老是显示)

    刚打电话就显示通话结束(打电话老是显示)

  • 快手直播降权怎么恢复(快手号降权了直播好还是不直播好)

    快手直播降权怎么恢复(快手号降权了直播好还是不直播好)

  • 华为p30pro怎么设置时间(华为p30pro怎么设置锁屏壁纸)

    华为p30pro怎么设置时间(华为p30pro怎么设置锁屏壁纸)

  • ES6 --- 解构赋值(数组,对象,函数)使用详解(es6解构赋值对象)

    ES6 --- 解构赋值(数组,对象,函数)使用详解(es6解构赋值对象)

  • 收到以前年度退回的所得税
  • 延期交税的情况有哪些
  • 公司购买金蝶属于什么费用
  • 预付账款和应付账款的区别
  • 个体工商户税务申报如何网上申报
  • 公司滴滴发票是什么意思
  • 抽奖中的汽车需要交购置税吗
  • 购买加油卡有优惠吗
  • 厂房面积测绘收费标准
  • 营改增后如何计算税金
  • 公司进项销项税差异较大
  • 免税和不征税货一样吗
  • 租赁合同印花税双方都要交吗
  • 固定资产管理的三大原则
  • 营改增后新纳入增值税征税范围的有
  • 增值税减免税如何处理
  • 股票交易的印花税和手续费是多少
  • 过路费可以抵税吗
  • 个人转让股权的合理费用都有哪些
  • 行政单位房租收入上交分录
  • 搜索特定
  • php实现的三个常数是什么
  • php数组函数实现机选双色球
  • 电脑中毒之后怎么办
  • 商场外面的广告牌什么位置好
  • 附加税异地预缴如何申报
  • mac option开机
  • 计提房租记什么科目
  • php lee
  • 对公账户开户费开户的时候就要交钱吗
  • 以旧换新的税务处理会计
  • 车间使用的辅助材料
  • web自动化测试方法
  • 股权收购印花税填哪里
  • node最新版本
  • elinks --dump
  • 兼职人员的劳务费标准
  • 增值税不动产扣除项目
  • 自然人独资可以变更为有限责任公司
  • 网上报税优点与缺点
  • 帝国cms使用手册
  • 成本法合并抵消分红
  • 什么样的公司可以申请破产
  • 税务系统重置密码
  • 个体对公账户是什么意思
  • 出口关税的计算公式
  • 生育津贴到公司了公司什么时候发给个人
  • 年度奖金个税计算器
  • 预付发票能入账吗
  • 个人劳务报酬所得税税率表
  • 固定资产清理是资产类的备抵科目吗
  • 什么是外汇业务,外币业务主要内容有哪些
  • 政府专项基金属于什么类
  • 承兑汇票贴现怎么做会计分录
  • 其他综合收益 综合收益
  • 科目汇总表里的应交税费
  • 颁发数字证书要符合什么条件
  • 代理进口业务会计分录
  • sql server 1222解决
  • mysql ERROR 1044 (42000): Access denied for user ''@'localhost' to database
  • centos7.6 yum源
  • samba开启
  • u盘安装win8系统教程图解
  • 电脑久了就会高温
  • 鼠标点击关闭按钮没反应
  • win8怎么更改账户名称
  • 基于stm32的100个毕业设计
  • opengl 旋转矩阵
  • 代码sd是什么意思
  • [置顶]马粥街残酷史
  • js中的垃圾回收机制有哪些方法
  • unity3d坐标系
  • android 开发 教程
  • javascript高级程序设计电子书
  • js鼠标点击图片就消失
  • 动感相册模板
  • 陕西宝鸡国税人才招聘
  • 股权转让所得怎么申报
  • 安徽省纪检监察官网
  • 建立高效的法治实施体系,需要着力解决四个问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设