el-tree中实现拖拽遇到的问题
前言:实现树节点拖拽功能element-ui中tree是支持的,draggable设置为true即可,draggable拖拽结束后,调用接口(保存这次改变的顺序)
但是当我拖拽树节点,将节点拖入播放器中(拖到树之外,另一个区域中),他将触发两个事件1>被拖拽的节点被放在最后一次经过的节点位置
2>被拖拽节点放入另一个区域,触发该区域事件
但是我们如果节点拖拽到树外面,我们就不改变节点位置
想法一:当节点拖拽超出树的拖拽范围,就不让该节点放置,可惜allow-drop只提供了三个参数,没有提供该元素目前的event,判断event.clientX(方案明显不可行)
想法二:拖拽结束时的触发方法提供了event,判断event.clientX,不满足条件,不去调用接口,发现页面节点位置还是变了,但是刷新树,位置不变(但是每次结束重新刷新树,性能肯定不好啊)
想法三:拖拽结束时触发方法,判断event.clientX,不满足条件触发allow-drop,设置为false,发现前面拖拽允许可行,后面再变无效果
想法四:拖拽结束时触发方法,判断event.clientX,配合remove和append方法,当然使用insertBefore或insertAfter配合remove也可以(方法有些蠢,它添加完,我删除,然后放入我需要的位置)
想法五:修改内部代码(不推荐)
想法六:等两个事件都触发后重新排序
1>节点开始拖拽时,注册事件node-drag-start
2>当拖拽到其它区域,触发事件
3>当拖拽事件完成时,重新排序
el-tree中实现拖拽遇到的问题相关推荐
- .net中实现拖拽控件
在.net中实现拖拽控件主要用到以下函数: MouseDown(object sender, MouseEventArgs e) MouseUp(object sender, MouseEventAr ...
- 中如何使用echart_jQueryEasyUI中的拖拽事件如何使用
jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽.可设置拖动元素相对于x.y轴拖动,可设置拖拽何时停止等效果 jQuery中的easyui是一个非常好用的插件,它虽然使用简单方便,但是 ...
- java swing 控件拖动_java swing中实现拖拽功能示例
java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: package com; import java.awt.*;import java.awt.datat ...
- eclipse插件开发:自定义导航器中的拖拽定义
有时候需要对导航器中的拖拽对象进行赋值,使用的场景是,拖拽导航器中的某个文件或者类或方法等,到某个编辑器中,, 因为默认的导航器所配备的拖拽动作,或则不能满足我们的需要,所有,有必要自定义,,拖拽器, ...
- selenium中录制拖拽动作
今天工作中遇到了selenium中录制拖拽动作需求:在同一个页面上,将一个table中的元素拖拽到另外一个table中. 通过查看帮助文档是使用dragAndDrop或类似的命令.根据使用方法drag ...
- JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
- vue中实现拖拽排序
原生拖拽 API 实现拖拽 设置元素 dragable 将元素的 dragable 属性设置 为 true (文本 图片 链接 的draggable 属性默认为 true)则元素可拖放 <div ...
- xd怎么做页面滑动_XD教程 | 如何在XD中制作拖拽手势”
原标题:XD教程 | 如何在XD中制作"拖拽手势" 今日主题:设计一个滑动交互 使用工具:Adobe XD 预计时长:1-2分钟 实用指数:★★★★★ 难度系数:★ 本期教程,我们 ...
- css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题
写在最前 针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用ifra ...
最新文章
- linux启动程序api编程,Linux编程中关于API函数与系统调用间关系
- java十四章带参方法课后_java14带参的方法
- Spring5参考指南:Bean的创建
- 【1】MySQL的四种事务隔离级别
- 前端学习(3328):闭包的形式3
- java类读取properties里内容
- cshop是什么开发语言_C语言是用什么语言编写出来的?
- 封装制作ghost xp,含加入域帐号配置迁移脚本。
- 如何使用动软代码生成器连接oracle生成数据库设计文档
- 打狗棒法之:Cknife(C刀)自定义模式秒过安全狗(二)
- 平安智盈人寿保险计算
- android 打印kernel log,Android native log输出为kernel log方法
- 请求的操作需要提升 win10
- 大韩航空如何成为一流航空——等级文化与称呼的改变
- 2015年3月TIOBE编程语言排行榜单
- HEVC Tile 编码器-kvazaar
- 【ICPR 2021】遥感图中的密集小目标检测:Tiny Object Detection in Aerial Images
- 设计模式 模版方法模式 展现程序员的一天
- 规范你的代码编写风格
- 流氓软件插件中介商自述黑色淘金路(转)