使用el-tree实现不同区域的拖拽功能时遇到的坑点

news2024/10/6 0:36:14

问题再现

利用el-tree实现在两个区域的拖拽,1.树上的拖拽排序,2.将树上节点拖拽到画布上。
在将节点拖拽到画布上的时候,只要在树上移动过,松开鼠标的时候,树上的拖拽排序功能也生效了,那么如何使这两个拖拽功能互斥呢?

解决思路1(不推荐)

拖拽到画布的时候,手动撤销树上上一次的排序,嫌麻烦(^^),不推荐

解决思路2(推荐)

鼠标落在那里就实现哪里的拖拽功能。
落在画布区域,就实现画布的拖拽;落在树上,就实现树上的排序功能。
那么问题来了,由于el-tree会记录最后一次的拖拽位置,那么移动到画布上松开鼠标的时候,树上的排序功能依旧会生效!!

解决方案:通过查看源码发现,el-tree里会有一个dragState变量来存储拖拽状态,拖拽到画布,松开鼠标的时候,把drag的状态值清空,那么树上的排序功能便被强制无法生效
在这里插入图片描述

// 画布里的drop方法
// treeModel 是左侧的树形
onDrop(e) {
......
            this.dragging = false;
            this.treeModel.dragState.dropNode = null;
            this.treeModel.dragState.draggingNode = null;
            this.treeModel.$el.querySelectorAll('.is-drop-inner').forEach(d => {
                d.classList.remove('is-drop-inner');
            });
 .....
}

至此,问题解决~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/695213.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

蓝海卓越计费管理系统 download.php 任意文件读取漏洞

0x01、漏洞描述 蓝海卓越计费管理系统 download.php文件存在任意文件读取漏洞,攻击者通过 …/ 遍历目录可以读取服务器上的敏感文件 0x02、漏洞影响 蓝海卓越计费管理系统 0x03、fofa title“蓝海卓越计费管理系统” 0x04、漏洞复现 登录页面如下&#xff1a…

shell中快速遍历文件下指定的内容

1.举例 遍历当前目录下所有Makefile文件,找到内容适配CONFIG_SMP的所有Makefile find -type f -name Makefile | xargs grep "CONFIG_SMP" 2.find命令 3.xargs命令 3.1. 命令由来 xargs (英文全拼: eXtended ARGuments&#xff…

关于Idea中springboot热部署,html,js保存不起作用

a、引入依赖&#xff1a; <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </depe…

浅谈智能还书车

智能还书车是一种新型的智能化设备&#xff0c;配备触摸显示屏或简单操作的人机交流界面、图形界面&#xff0c;通过协议或其他网络及专用接口与图书馆自动化系统数据相连接&#xff0c;由读者自行对图书进行快速归还&#xff0c;读者把图书放到书车上&#xff0c;系统自动对图…

2. 线性模型

b站刘二老师pytorch深度学习课程&#xff1a;https://www.bilibili.com/video/BV1Y7411d7Ys?p2&vd_sourceb17f113d28933824d753a0915d5e3a90 如果每周学习4个小时&#xff0c;那能够获得什么成绩&#xff1f; y已知的是采样得到的数据&#xff0c;属于训练集&#xff08;t…

使用 css 禁用 input 控件实现 disable 效果

文章目录 需求分析代码 需求 使用 css 禁用 input 控件实现 disable 效果 分析 在 js 中&#xff0c;我们使用以下方法来阻止input,select,checkbox的默认事件&#xff0c;如 javascript event.preventDefault() event.stopPropagation()但在 css 中&#xff0c;我们可以设置对…

Android App的几个核心概念

Application启动 点击桌面图标启动App(如下流程图) 针对以上流程图示&#xff1a; ActivityManagerService#startProcessLocked()Process#start()ActivityThread#main()&#xff0c;入口分析的地方ActivityThread#attach()&#xff0c;这个里面的逻辑很核心 ActivityManagerS…

20230621 taro+vue3+webpack5+antdv时,在vue文件中特定组件时,devH5环境报错

问题 在某个vue文件下 import { notification } from ant-design-vue;然后在终端开始 yarn dev:h5在浏览器看效果 回出现以下错误 Uncaught (in promise) TypeError: __webpack_require__.hmd is not a functionat ./node_modules/.taro/h5/prebundle/ant-design-vue.js原因…

提高客户体验:智能客服外包服务的优势

随着科技的发展&#xff0c;智能客服外包服务越来越受到企业的青睐。这种服务能够帮助企业提高客户体验&#xff0c;减少客服成本&#xff0c;提高工作效率。本文将从技术、用户体验等方面阐述智能客服外包服务的优势。 人工智能技术 智能客服外包服务采用了一系列的技术手段&…

自然语言处理库NLTK的初步环境配置和使用例子

NLTK的基本介绍见此&#xff0c; 了解自然语言处理_bcbobo21cn的博客-CSDN博客 先安装python&#xff1b;然后用pip命令安装nltk&#xff1b; 然后进入python&#xff0c;下载nltk的数据包&#xff1b;输入下图语句&#xff0c;弹出一个框&#xff0c; 一般选择 all&#xff…

PHP 实验室设备系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 实验室设备系统 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/87959348https://downlo…

Kaggle 数据竞赛 | ICR - 鉴定与年龄相关的疾病

文章目录 一、前言二、主要内容1. 评估2. 时间线3. 奖金4. 代码要求 三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 使用机器学习技术&#xff0c;通过匿名健康特征的测量数据来检测疾病。 比赛目标 本次比赛的目标是预测一个人是…

华为云Classroom一站式教学实践平台,开启云端教学新征程

随着高考落下帷幕&#xff0c;各高校将迎来新一届大学新生入学&#xff0c;他们的学长学姐们经过四年的学习&#xff0c;也即将步入社会&#xff0c;迈向一段新的人生旅程。 在这里小智先祝大家未来一切顺意&#xff0c;不忘初心&#xff0c;大鹏一日同风起&#xff0c;扶摇直…

win10环境下php安装thinkPHP5的曲线方式

win10环境下php安装thinkPHP5的曲线方式 强调一下在win10环境安装thinkPHP5需要使用Composer。 首先是thinkphp的教程&#xff1a;https://www.kancloud.cn/manual/thinkphp5/118006 你就会发现很坑逼 安装Composer的时候一种报错&#xff0c;就是php.ini文件错误。网上说什么…

Unity内置渲染管线升级URP教程

简介 URP全称为Universal Render Pipeline(通用渲染管线)&#xff0c;可以提供更加灵活的渲染方案&#xff0c;通过添加Render Feature实现各种渲染效果。并且可以针对移动平台进行专门的优化&#xff0c;同时还提供了SRPBatcher提高渲染效率。Unity的一些工具&#xff0c;比如…

客户关系管理系统有哪些?5款客户关系管理软件评测

客户关系管理系统是一种企业与客户之间的交互平台&#xff0c;它将客户的需求、市场环境、企业的发展战略等融入到整个业务流程中&#xff0c;在企业和客户之间建立起一个共享的资源库&#xff0c;使企业对客户的了解更深更全面&#xff0c;进而实现与客户的深入互动&#xff0…

C#创建窗体应用程序

1、新建项目&#xff0c;选择窗体应用 2、打开相关视图 工具箱&#xff1a;将工具箱中的控件直接拖拽到界面中&#xff0c;会自动生成对用的控件。 属性&#xff1a;可以设置控件的相关属性&#xff0c;包括事件&#xff0c;双击 3、设计应用界面 4、新建一个交互窗口 5、在登…

MVP(Multi-view Prompting):多视图提示改进了方面情感元组预测

论文题目&#xff08;Title&#xff09;&#xff1a;MVP: Multi-view Prompting Improves Aspect Sentiment Tuple Prediction 研究问题&#xff08;Question&#xff09;&#xff1a;多视图提示对方面情感元组检测的影响 研究动机&#xff08;Motivation&#xff09;&#x…

AI智能人脸识别,抠图-应用证件照

效果展示&#xff1a; 关键代码&#xff1a; import numpy as np import cv2 import osdef crop_face(source_image_path, output_folder_path, tag_width, tag_height):face_detector cv2.CascadeClassifier(cv2.data.haarcascades haarcascade_frontalface_default.xm…

【算法题解】45. N叉树的层序遍历

这是一道 中等难度 的题 https://leetcode.cn/problems/n-ary-tree-level-order-traversal/ 题目 给定一个 N 叉树&#xff0c;返回其节点值的层序遍历。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。 树的序列化输入是用层序遍历&#xff0c;每组子节点都由 nu…