实现Tree 树形控件的鼠标拖拽功能
1.element中的el-tree实现可拖拽节点
通过 draggable 属性可让节点变为可拖拽
<el-tree
:data="data"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
>
</el-tree>
methods: {
handleDragStart(node, ev) {
console.log("drag start", node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log("tree drag enter: ", dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log("tree drag leave: ", dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log("tree drag over: ", dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log("tree drag end: ", dropNode && dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log("tree drop: ", dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode, type) {
if (dropNode.data.label === "二级 3-1") {
return type !== "inner";
} else {
return true;
}
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
},
},


实现一个只能在本级改变位置拖拽
使用allowDrop
// 拖拽时判定目标节点能否被放置。
//draggingNode(拖拽的节点)
//dropNode(放置的目标节点)
//type 参数有三种情况:'prev'、'inner' 和 'next',分别表示
//放置在目标节点前、插入至目标节点和放置在目标节点后
allowDrop(draggingNode, dropNode, type) {
// 一级节点互相拖拽
// if (draggingNode.level == "1") {
// if (dropNode.level == "1") {
// return type === "prev" || type === "next";
// }
// }
// // 二级节点之间互相拖拽,但是只能放在自己的二级节点
// if (draggingNode.level == "2") {
// if (dropNode.level == "2") {
// if (dropNode.data.ParentNodes == draggingNode.data.ParentNodes) {
// return type === "prev" || type === "next";
// }
// }
// }
if (draggingNode.level == dropNode.level) {
if (dropNode.data.ParentNodes == draggingNode.data.ParentNodes) {
return type === "prev" || type === "next";
}
}
return false;
},
这样就可以实现,同级拖拽
相关文章:
实现Tree 树形控件的鼠标拖拽功能
1.element中的el-tree实现可拖拽节点 通过 draggable 属性可让节点变为可拖拽 <el-tree :data"data" node-key"id" default-expand-all node-drag-start"handleDragStart" node-drag-enter"handleDragEnter" node-drag-leave"…...
同为科技智能PDU助力Deepseek人工智能和数据交互的快速发展
1 2025开年,人工智能领域迎来了一场前所未有的变革。Deepseek成为代表“东方力量”的开年王炸,不仅在国内掀起了技术热潮,并且在全球范围内引起了高度关注。Deepseek以颠覆性技术突破和现象级应用场景席卷全球,这不仅重塑了产业格…...
硬件学习笔记--42 电磁兼容试验-6 传导差模电流干扰试验介绍
目录 电磁兼容试验-传导差模电流试验 1.试验目的 2.试验方法 3.判定依据及意义 电磁兼容试验-传导差模电流干扰试验 驻留时间是在规定频率下影响量施加的持续时间。被试设备(EUT)在经受扫频频带的电磁影响量或电磁干扰的情况下,在每个步进…...
基于 Filebeat 的日志收集
在现代分布式系统中,日志数据作为关键的监控与故障排查依据,越来越受到重视。本文将深入探讨 Filebeat 的技术原理、配置方法及在 ELK(Elasticsearch、Logstash、Kibana)生态系统中的应用,帮助开发者构建高效、稳定的日…...
Next.js 15【实用教程】2025最新版
官网 https://nextjs.org/docs/app/getting-started Next.js 简介 Next.js 由 Vercel 开发和维护,旨在解决单页应用(SPA)和多页应用(MPA)在性能和 SEO 上的不足。 核心特性 服务端渲染(SSR)--…...
vue学习10
1.GPT和Copilot Copilot Tab接受 删除键,不接受 ctrlenter更多方案 更适合的是修改方向 const submitForm async () > {//等待校验结果await formRef.value.validate()//提交修改await userUpdateInfoService(form.value)//通知user模块,进行数据更…...
redis 缓存击穿问题与解决方案
前言1. 什么是缓存击穿?2. 如何解决缓存击穿?怎么做?方案1: 定时刷新方案2: 自动续期方案3: 定时续期 如何选? 前言 当我们使用redis做缓存的时候,查询流程一般是先查询redis,如果redis未命中,再查询MySQL,将MySQL查询的数据同步到redis(回源),最后返回数据 流程图 为什…...
【Vue3 入门到实战】16. Vue3 非兼容性改变
目录 1. 全局 API 的变化 2. 模板指令的变化 2.1 组件v-model用法 2.2 template v-for用法 2.3 v-if 和v-for 优先级变化 2.4 v-bind"object" 顺序敏感 2.5 v-on:event.native 被移除 3. 组件的变化 3.1 功能组件只能使用普通函数创建 3.2 SFC弃用功能属性…...
20250214 随笔 Elasticsearch(ES)索引数据 vs. 业务数据库冗余双写
Elasticsearch(ES)索引数据 vs. 业务数据库冗余双写的区别、优缺点分析 在高并发数据查询场景下,Elasticsearch(ES) 和 业务数据库冗余双写 都是常见的数据同步方案。它们主要区别在于数据存储方式、查询性能、数据一…...
c# textbox 设置不获取光标
[DllImport("user32",EntryPoint "HideCaret")] private static extern bool HideCaret(IntPtr hWnd); //需引入命名空间using System.Runtime.InteropServices; private void Txt_RecInfo_MouseDown(object sender, MouseEventArgs e) { …...
中望CAD c#二次开发 ——VS环境配置
新建类库项目:下一步 下一步 下一步: 或直接: 改为: <Project Sdk"Microsoft.NET.Sdk"> <PropertyGroup> <TargetFramework>NET48</TargetFramework> <LangVersion>pr…...
anolis os 8.9安装jenkins
一、系统版本 # cat /etc/anolis-release Anolis OS release 8.9 二、安装 # dnf install -y epel-release # wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo # rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.…...
HtmlRAG:RAG系统中,HTML比纯文本效果更好
HtmlRAG 方法通过使用 HTML 而不是纯文本来增强 RAG 系统中的知识表示能力。通过 HTML 清洗和两步块树修剪方法,在保持关键信息的同时缩短了 HTML 文档的长度。这种方法优于现有基于纯文本的RAG的性能。 方法 其实主要看下围绕html提纯思路,将提纯后的…...
TypeScript 中的 reduce计算统计之和
1、计算字符串数组中最大的一项,比如数组:list ["家长会,柘城,喝士大夫","模压,手动阀,阿斯蒂"],求出list中字符串长度之和最大的那项: // 初始化变量来存储字数之和最多的项及其字数之和let maxWord ;let…...
HTTP/2 由来及特性
HTTP/2 的由来 HTTP/1.x 的局限性 性能瓶颈 队头阻塞问题:在HTTP/1.x中,一个TCP连接在同一时间只能处理一个请求,后续请求必须等待前面的请求处理完成并收到响应后才能被处理。例如,当一个页面有多个资源(如图片、脚…...
android 安装第三方apk自动赋予运行时权限
摘要:行业机使用场景点击运行时权限很麻烦,而随着android的演进,对于权限的管控越发严格。故本文通过对系统的修改实现第三方app在运行时直接获取全部权限。 通过属性ro.perms.force_grant控制功能开关。 Index: frameworks/base/services/…...
PyTorch Lightning LightningDataModule 介绍
LightningDataModule 是 PyTorch Lightning 提供的数据模块,用于统一管理数据加载流程(包括数据准备、预处理、拆分、批量加载等)。它的核心作用是将数据处理逻辑与模型解耦,提高代码的可复用性和可读性。 1. LightningDataModule 的作用 ✅ 封装数据预处理:数据下载、清…...
windows平台上 oracle简单操作手册
一 环境描述 Oracle 11g单机环境 二 基本操作 2.1 数据库的启动与停止 启动: C:\Users\Administrator>sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on 星期五 7月 31 12:19:51 2020 Copyright (c) 1982, 2013, Oracle. All rights reserved. 连接到:…...
【网络安全 | 漏洞挖掘】价值3133美元的Google IDOR
未经许可,不得转载。 文章目录 正文正文 目标URL:REDACTED.google.com。 为了深入了解其功能,我查阅了 developer.google.com 上的相关文档,并开始进行测试。 在测试过程中,我发现了一个 XSS 漏洞,但它触发的域名是经过正确沙盒化的 *.googleusercontent.com,这符合 …...
LabVIEW太阳能制冷监控系统
在全球能源需求日益增长的背景下,太阳能作为一种无限再生能源,被广泛应用于各种能源系统中。本基于LabVIEW软件和STM32F105控制器的太阳能制冷监控系统的设计与实现,提供一个高效、经济的太阳能利用方案,以应对能源消耗的挑战。 项…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
AI语音助手的Python实现
引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...
