vue+sortablejs来实现列表拖拽——sortablejs的使用

sortablejs官网:https://sortablejs.com/

最近在看form-builder组件,发现里面有用到sortablejs插件,用于实现拖拽效果。
在这里插入图片描述
但是这个官网中的配置,实在是看不懂,太简单又太复杂,不实用。
下面记录一下我的使用:

实现效果

1.左侧可以拖拽到右侧
2.右侧不可以拖拽到左侧
3.左侧不可重复拖拽到右侧,且拖拽后左侧数据不变
4.上下拖拽后,数据自动排序

解决步骤1:安装npm install sortablejs --save

解决步骤2:在页面中局部引入

import Sortable from 'sortablejs';

解决步骤3:html部分代码

<div style="display: flex"><div id="table-names" style="flex: 1"><div class="tableItem" v-for="item of tableData" :key="item.id"><span>{{ item.id }}</span>=><span>{{ item.sort }}</span></div></div><div id="table-names2" style="flex: 1"><div class="tableItem" v-for="item of tableData2" :key="item.id"><span>{{ item.id }}</span>=><span>{{ item.sort }}</span></div></div>
</div>

在这里插入图片描述

解决步骤4:js部分代码

在mounted中添加以下代码:

let el = document.getElementById('table-names');
Sortable.create(el, {animation: 200,group: 'shared',chosenClass: 'chosenClass', // 被选中项的css 类名// dragClass: "dragClass",  // 正在被拖拽中的css类名onEnd: (evt) => {let { oldIndex, newIndex } = evt;this.switchMapOrder(oldIndex, newIndex);},
});
let el2 = document.getElementById('table-names2');
Sortable.create(el2, {animation: 200,chosenClass: 'chosenClass', // 被选中项的css 类名onEnd: (evt) => {let { oldIndex, newIndex } = evt;this.switchMapOrder2(oldIndex, newIndex);},
});

两个方法定义如下:

 switchMapOrder(oldIndex, newIndex) {console.log(`oldIndex: ${oldIndex}, newIndex: ${newIndex}`);const tableData = this.tableData;let resultData = []; // 结果数组// 先把被移动的那条数据单独取出来let beSpliceItem = tableData.splice(oldIndex, 1);if (this.tableData[oldIndex] && this.tableData[oldIndex].id) {let findIndex = this.tableData2.findIndex((item) => item.id == this.tableData[oldIndex].id);if (findIndex == -1) {this.tableData2.splice(newIndex, 0, this.tableData[oldIndex]);}}// 把剩下的数据复制给结果数组resultData = tableData;// 把被移动的那条数据赋值给结果数组resultData.splice(newIndex, 0, beSpliceItem[0]);// 遍历结果数组,让sort重新排序let newTableData = [];resultData.forEach((item, index) => {item.sort = index + 1;newTableData.push(item);});this.tableData = newTableData;console.log(222, this.tableData2, this.tableData2.length);},switchMapOrder2(oldIndex, newIndex) {console.log(`oldIndex: ${oldIndex}, newIndex: ${newIndex}`);const tableData = this.tableData2;let resultData = []; // 结果数组// 先把被移动的那条数据单独取出来let beSpliceItem = tableData.splice(oldIndex, 1);// 把剩下的数据复制给结果数组resultData = tableData;// 把被移动的那条数据赋值给结果数组resultData.splice(newIndex, 0, beSpliceItem[0]);// 遍历结果数组,让sort重新排序let newTableData = [];resultData.forEach((item, index) => {item.sort = index + 1;newTableData.push(item);});this.tableData2 = newTableData;console.log(this.tableData2);},

完成!!!多多积累,多多收获!!!

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

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

相关文章

Redis 实战之RDB文件结构

RDB文件结构 databases 部分key_value_pairs 部分value 的编码字符串对象列表对象集合对象哈希表对象有序集合对象INTSET 编码的集合ZIPLIST 编码的列表、哈希表或者有序集合 总结AOF持久化的实现命令追加 AOF 文件的写入与同步小结 在本章之前的内容中&#xff0c; 我们介绍了…

C++优先级队列priority_queue模拟实现

priority_queue模拟实现 1. priority_queue介绍2. priority_queue使用2.1 priority_queue显示定义2.2priority_queue接口使用 3. 仿函数4. priority_queue模拟实现4.1 向上调整算法4.2 向下调整算法4.3 实现priority_queue的接口4.4 使用[仿函数](https://legacy.cplusplus.com…

Springboot+Vue项目-基于Java+MySQL的流浪动物管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

MCP3008-I/SL 模数转换器ADC SPI接口 模拟信号采集

MCP3008-I/SL 模数转换器ADC 贴片SOIC16 MCP3008-I/SL 是一款模数转换器&#xff08;ADC&#xff09;&#xff0c;属于 SAR&#xff08;逐次逼近寄存器&#xff09;架构的 ADC。它具有以下特点&#xff1a; 8 通道单 ADC 最大采样率&#xff1a;200ksps&#xff08;千样点每秒…

为什么byte 的取值范围是 [-128,127]

在计算机中&#xff0c;byte&#xff08;字节&#xff09;是存储数据的基本单位&#xff0c;通常用8位二进制数字表示一个字节。在字节中&#xff0c;最高位的最左边一位是符号位&#xff0c;用来表示正负号&#xff0c;值为0表示正数&#xff0c;值为1表示负数。 如果将byte定…

URL过滤

什么是URL过滤&#xff1f; URL过滤是一种针对用户的URL请求进行上网控制的技术&#xff0c;通过允许或禁止用户访问某些网页资源&#xff0c;达到规范上网行为和降低安全风险的目的。 URL过滤可以基于URL分类、特定URL等多种方式限制URL访问。 URL过滤的主要作用如下&#xf…

不是所有的AI都这么乖——探索DAN模式的野性一面

今天偶然间发现DAN模式还挺好玩的!!! 在一个充斥着预测性回答和过分礼貌的人工智能世界里,你是否曾渴望一场真正的思想碰撞?忘掉你以往遇到的那些听话的AI。DAN模式,一个设计来打破常规、挑战边界的AI,等着你来探索。 模式解读 DAN模式,即“现在就做任何事情”…

Python Flask框架(一)初识Flask

Flask是使用Python编写的Web微框架。Web框架可以使我们不用关心底层的请求响应处理&#xff0c;更方便高效的编写Web程序。Flask有两个主要依赖&#xff0c;一个是WSGI&#xff08;Web Server Gateway Interface&#xff0c;web服务器网关接口&#xff09;工具集&#xff0c;另…

JAVA基础 | for循环的简介及break和continue

1.for循环 for循环是更加简洁的循环语句&#xff0c;大部分情况下&#xff0c;for循环可以代替while循环、do-while循环。 for循环的格式为&#xff1a; for( 初始语句 ; 执行条件 ; 增量 ){循环体 } 执行顺序&#xff1a;初始语句 > 执行条件是否符合? > 循环体 …

【文献解析】3D高斯抛雪球是个什么玩意

论文地址&#xff1a;https://arxiv.org/abs/2308.04079 项目&#xff1a;3D Gaussian Splatting for Real-Time Radiance Field Rendering 代码&#xff1a;git clone https://github.com/graphdeco-inria/gaussian-splatting --recursive 一、文章概述 1.1问题导向 辐射…

USB3.0接口——(1)基础知识

1.背景 USB 3.0是一种USB规范&#xff0c;该规范由英特尔等公司发起。 USB协议版本 命名约定 USB-IF组织引入命名约定&#xff0c;将端口列为 USB 5 Gbps、USB 10 Gbps、USB 20 Gbps 、USB 40 Gbps&#xff0c;而不使用版本号。获得 USB-IF 认证的 USB 产品的制造商会获得带…

几个远程查看电脑在线、MAC、主机名的DOS命令

免于来回奔波&#xff0c;方便查看其它电脑信息&#xff0c;用几个有用的命令&#xff1a;其中2、3是基于1&#xff0c;才可用。 1、查看远程主机是否在线&#xff0c;如远程主机未屏蔽ping命令 C:\Users\Administrator>ping 100.172.167.177 C:\Users\Administrator>…

Qt中使用静态函数调用emit信号

使用静态函数作为连接助手&#xff0c;意味着你创建一个静态函数来帮助触发某个QObject实例的信号&#xff0c;而不是直接定义静态信号&#xff08;因为Qt不支持&#xff09;。这种模式允许你从全局上下文或其他非QObject环境中间接触发生命周期管理在其他地方的对象信号。以下…

SAP 长文本语言代码维护

在SAP中&#xff0c;我们发现长文本都是有语言代码的&#xff0c;如果需要新增一个语言代码的话&#xff0c;需要通过程序RSCPCOLA进行维护处理 具体实现步骤如下&#xff1a; 1. 输入事务码SE38&#xff0c;输入程序名RSCPCOLA&#xff0c;然后点击执行按钮 2. 维护信函语言…

sklearn的make_blobs函数

make_blobs是一个用于生成随机数据点的实用函数&#xff0c; from sklearn.datasets import make_blobs X,Y make_blobs(n_samples2000,n_features2,centers12,cluster_std0.05,center_box[-5,5],random_state21)n_samples: 要生成的样本数量。centers: 要生成的簇&#xff0…

使用自关联方法处理多表关系

使用自关联方法处理多表关系 这里通过省市区之间的关系来解释自关联的情况 在设置地址的过程中 , 不可避免的需要设置 , 省份 ,市以及区 而省市区三者之间的具有一定的关联关系 一个省份对应多个市 一个市对应多个区 如果通过设置主表从表关系则需要设置三张标分别对应省…

电子书3D翻页制作技巧大揭秘,轻松将文档转化为逼真仿真书!

随着数字化时代的到来&#xff0c;电子书已成为阅读的主流形式之一。然而&#xff0c;普通的电子书往往缺乏纸质书的质感和互动性&#xff0c;让人感到有些遗憾。今天&#xff0c;将为你揭秘电子书3D翻页制作技巧&#xff0c;让你轻松将文档转化为逼真仿真书&#xff01; 1.要制…

LearnOpenGL(九)之材质

一、材质 在现实世界里&#xff0c;每个物体会对光产生不同的反应。比如&#xff0c;钢制物体看起来通常会比陶土花瓶更闪闪发光&#xff0c;一个木头箱子也不会与一个钢制箱子反射同样程度的光。在opengl中&#xff0c;我们可以针对每种表面定义不同的材质(Material)属性来模…

Mac 解决外接移动硬盘(NTFS格式)无法写入的问题

文章目录 1. 问题描述2. 解决步骤 1. 问题描述 MacOS 可以识别 NTFS 格式的磁盘&#xff0c;但是默认情况下是只读模式&#xff0c;即无法向 NTFS 格式的磁盘写入数据。这是因为 NTFS 是 Windows 系统默认的文件系统格式&#xff0c;而 MacOS 对 NTFS 的写入支持是有限的。 如…

生成式人工智能教学解决方案

一、软件技术人员的需求分析 在当今信息化社会&#xff0c;软件技术作为推动科技创新和经济发展的核心力量&#xff0c;其重要性日益凸显。随着数字化转型的加速推进&#xff0c;各行各业对软件技术人才的需求呈现出多元化、高端化的发展趋势。以下是软件技术人员需求的详细分…