当前位置: 首页 > news >正文

实现简易 vuedraggable 的拖拽排序功能

一、案例效果

  • 拖拽计数4实现手动排序
    在这里插入图片描述
    在这里插入图片描述

二、案例代码

<draggable:list="searchResult.indicator":group="{ name: 'indicators' }"item-key="field"handle=".drag-handle-icon"><divclass="field-item"v-for="(item, index) in searchResult.indicator":key="index"><span>{{ item.name }}({{ item.field }})</span><mtd-tooltip content="文字内容" placement="top"><span class="cursor-pointer"><mtd-icon name="warning-circle-o"></mtd-icon></span></mtd-tooltip><mtd-iconname="handle"class="drag-handle-icon cursor-pointer"></mtd-icon></div></draggable><script lang="ts" setup name="DrawerContent">
import { ref } from 'vue';
import Draggable from 'vuedraggable';const searchResult = ref({indicator: [{ name: '计数', field: 'userid1' },{ name: '计数指标', field: 'userid2' },{ name: '计数指标1', field: 'userid3' },{ name: '计数', field: 'userid4' },{ name: '计数2', field: 'userid5' },],polymerize: [{ name: '计数', field: 'userid1' },{ name: '聚合', field: 'userid2' },{ name: '聚合1', field: 'userid3' },{ name: '计数', field: 'userid4' },],
});
</script>

三、总结

  1. 将 searchResult 改为响应式数据
  2. 为 draggable 组件添加 @end 事件处理器可写入对应逻辑
  3. 实现 onDragEnd 方法来更新数据

相关文章:

实现简易 vuedraggable 的拖拽排序功能

一、案例效果 拖拽计数4实现手动排序 二、案例代码 <draggable:list"searchResult.indicator":group"{ name: indicators }"item-key"field"handle".drag-handle-icon"><divclass"field-item"v-for"(item…...

第L2周:机器学习|线性回归模型 LinearRegression:2. 多元线性回归模型

本文为365天深度学习训练营 中的学习记录博客原作者&#xff1a;K同学啊 任务&#xff1a; ●1. 学习本文的多元线形回归模型。 ●2. 参考文本预测花瓣宽度的方法&#xff0c;选用其他三个变量来预测花瓣长度。 一、多元线性回归 简单线性回归&#xff1a;影响 Y 的因素唯一&…...

JavaScript的条件语句

if条件语句 if结构先判断一个表达式的布尔值&#xff0c;然后根据布尔值的真伪&#xff0c;执行不同的语句。所谓布尔值&#xff0c;指的是JavaScript 的两个特殊值&#xff0c;true表示真&#xff0c;false表示伪。 if语句语法规范 if(布尔值){语句;}var m3if(m3){console.l…...

vue3 vite模式配置测试,开发、生产环境以及代理配置

1、首先在根目录下创建三个文本文件&#xff1a;.env.development&#xff0c;.env.production&#xff0c;.env.test .env.development中的内容为&#xff1a; // 开发环境 .env.development NODE_ENV development VITE_APP_MODE development VITE_OUTPUTDIR dist_dev /…...

【rabbitmq-server】安装使用介绍

在 1050a 系统下安装 rabbitmq-server 服务以及基本配置;【注】:改方案用于A版统信服务器操作系统 文章目录 功能概述功能介绍一、安装软件包二、启动服务三、验证四、基本配置功能概述 RabbitMQ 是AMQP的实现,高性能的企业消息的新标准。RabbitMQ服务器是一个强大和可扩展…...

Kafka系列之:安装部署CMAK,CMAK管理大型Kafka集群参数调优

Kafka系列之:安装部署CMAK,CMAK管理大型Kafka集群参数调优 一、CMAK二、要求三、配置四、启动服务五、使用 Security 启动服务六、消费者/生产者滞后七、从 Kafka Manager 迁移到 CMAK八、CMAK管理大型Kafka集群参数调优九、后台运行CMAK十、输出日志一、CMAK CMAK(之前称为…...

c语言200例 64

大家好&#xff0c;欢迎来到无限大的频道。 今天带领大家来学习c语言。 题目要求&#xff1a; 设计一个进行候选人的选票程序。假设有三位候选人&#xff0c;在屏幕上输入要选择的候选人姓名&#xff0c; 有10次投票机会&#xff0c;最后输出每个人的得票结果。好的&#xff…...

[leetcode]216_组合总和III_给定数字范围且输出无重复

找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9 每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回。示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 解释: 1…...

Doris 2.x 安装及使用

Doris 2.x 安装及使用 简介 Apache Doris 是一款基于 MPP 架构的高性能、实时的分析型数据库&#xff0c;以高效、简单、统一的特点被人们所熟知&#xff0c;仅需亚秒级响应时间即可返回海量数据下的查询结果&#xff0c;不仅可以支持高并发的点查询场景&#xff0c;也能支持…...

MySQL字符集设置

MySQL字符集设置 一、查看当前配置的字符集 \s;示例 MariaDB [(none)]> \s -------------- mysql Ver 15.1 Distrib 5.5.68-MariaDB, for Linux (x86_64) using readline 5.1Connection id: 11 Current database: Current user: rootlocalhost SSL: …...

深度学习模型量化

模型量化是深度学习领域中的一项重要技术&#xff0c;它通过降低模型参数的精度&#xff0c;将浮点数转换为整数或定点数&#xff0c;从而实现模型的压缩和优化。以下是进行模型量化的详细步骤和注意事项&#xff1a; 一、模型量化的基本步骤 选择量化方法 后训练量化&#xf…...

红黑树和B+树

红黑树和B树是两种常用的自平衡数据结构&#xff0c;适用于不同的应用场景和需求。下面是对这两种树的详细比较和描述&#xff1a; 红黑树 基本结构&#xff1a; 红黑树是一种自平衡的二叉搜索树&#xff08;Binary Search Tree&#xff09;&#xff0c;其中每个节点都有一个颜…...

debian 12配置固定ip

配置文件 cat /etc/network/interfaces |grep -v # source /etc/network/interfaces.d/*auto lo iface lo inet loopbackallow-hotplug ens18 iface ens18 inet staticaddress 192.168.0.105/24network 192.168.0.0broadcast 192.168.0.255gateway 192.168.0.1dns-nameserver…...

OceanBase技术解析: 执行器中的自适应技术

在《OceanBase 数据库源码解析》这本书中&#xff0c;对于执行器的探讨还不够深入&#xff0c;它更多地聚焦于执行器的并行处理机制。因此&#xff0c;通过本文与大家分享OceanBase执行器中几种典型的自适应技术&#xff0c;作为对书中执行器部分的一个补充。 提升数据库分析性…...

Spring Cloud Gateway接入WebSocket:实现实时通信

在现代的微服务架构中&#xff0c;实时通信变得越来越重要。Spring Cloud Gateway作为Spring Cloud生态中的API网关&#xff0c;提供了动态路由、监控、弹性、安全等功能。本文将介绍如何通过Spring Cloud Gateway接入WebSocket&#xff0c;实现服务之间的实时通信。 为什么需…...

linux信号| 学习信号三步走 | 学习信号需要打通哪些知识脉络?

前言: 本节内容主要讲解linux下信号的预备知识以及信号的概念&#xff0c; 信号部分我们将会分为几个阶段进行讲解&#xff1a;信号的概念&#xff0c; 信号的产生&#xff0c; 信号的保存。本节主要讲解信号 ps:本节内容适合学习了进程相关概念的友友们进行观看哦 目录 什么是…...

Java调用第三方接口、http请求详解,一文学会

Java 调用第三方接口的封装方法详解 在开发企业级应用时&#xff0c;调用第三方接口是非常常见的场景。我们可能需要与外部服务集成&#xff0c;如支付接口、短信接口、天气服务接口等。为了提高代码的可维护性、复用性和易扩展性&#xff0c;封装第三方接口调用的方法非常重要…...

windows10使用bat脚本安装前后端环境之redis注册服务

首先需要搞清楚redis在本地是怎么安装配置、然后在根据如下步骤编写bat脚本&#xff1a; 思路 1.下载zip格式redis 2.查看windows server服务是否已安装redis 3.启动查看服务是否正常 bat脚本 echo off echo windows10 x64 server redis init REM 请求管理员权限并隐藏窗口 …...

fastapp-微信开发GPT项目第一课

0. 开发说明 在学习开发本项目之前&#xff0c;必须保证有以下知识储备和环境工具。 技术栈说明python>3.9、pydantic>2.7.1python基础&#xff0c;http协议fastapi>0.111.0web协程异步框架&#xff0c;有web开发基础&#xff0c;异步编程&#xff0c;类型标注[pyth…...

在双十一必买的好物有哪些?2024年双十一好物清单分享

一年一度的双十一购物狂欢节再次悄然临近&#xff0c;它不仅是一场购物的盛宴&#xff0c;更是我们提前规划生活、享受优惠的绝佳时机&#xff0c;在这个全民狂欢的日子里&#xff0c;各大品牌纷纷亮出杀手锏&#xff0c;推出年度最给力的优惠和新品&#xff0c;让人目不暇接&a…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...