Vue+SortableJs实现拖拽排序

2024-08-20 21:04

本文主要是介绍Vue+SortableJs实现拖拽排序,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求说明

需求是需要首列固定、除首尾列外可进行拖动排序并保存数据

SortableJs中文地址

SortableJs

实现说明

  • 针对首尾列固定SortableJs提供了一个配置,该配置虽然可实现首尾列不可拖动,但是在拖动其他元素到首尾列时位置仍被调换,所以我想到基于html结构进行控制(曾经看到一篇文章 还可使用另一种做法 就是首位可拖动 但拖动后通过数据控制其恢复到原位 变相的未发生变化)
filter: ".ignore-elements",  // 过滤器,不需要进行拖动的元素
  • 怎么通过html结构进行控制呢?其实也很简单,就是将需要拖拽的内容统一放到一个块元素中,这样我们通过获取dom结构即可创建Sortable对象。
  • Sortable关键配置(详细可参考SortableJs中文网)
disabled: false, // 是否开启拖拽
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时,效果更好看
handle: ".my-handle", // ※※※ 拖动手柄 可以自定义拖动图标 仅拖动图标时才能拖动该元素
filter: ".ignore-elements", // 那些元素不能拖动 上面已经讲过了
还有几个生命周期函数 会很重要 详细参考文档吧 
  • 主要数据交换逻辑其实在生命周期函数中完成,但是有个注意点页面元素发生了位置交换 实际数据顺序并未发生变化 所以在拖拽后在数据处理后要进行排序

不啰嗦上代码

html

<div class="hd-settings-content h-content" v-loading="loadSettings"><el-scrollbar style="height: calc(100vh - 421px);"><div class="header-content"><el-checkboxtitle="固定列不可操作"v-model="defaultCheckItem"label="固定列不可拖动"size="large":disabled="true"/></div><div id="drag-content"><divv-for="item in hdAllSettings"class="header-content flex-spw-center draggable-cursor":key="item.id"><el-checkboxv-model="item.check":label="item.label"@change="hdSettingsChange(item)"size="large"/><imgsrc="../../../assets/images/common/ic-drag.png"class="my-handle"width="16"/></div></div><div class="header-content"><el-checkboxtitle="固定列不可操作"v-model="defaultCheckItem"label="操作"size="large":disabled="true"/></div></el-scrollbar>
</div>

js

dragSort(): void {const dragsHtml = document.getElementById('drag-content') as anythis.sortableObj = new Sortable(dragsHtml, {disabled: false, // 是否开启拖拽ghostClass: 'sortable-ghost', //拖拽样式animation: 150, // 拖拽延时,效果更好看handle: ".my-handle",filter: ".ignore-elements",preventOnFilter: true,sort: true,onEnd: (evt: any) => {// 数据交换 evt.oldIndex evt.newIndex// 未发生移动if (evt.oldIndex === evt.newIndex) {return}// 向下移动if (evt.oldIndex < evt.newIndex) {// 移动的节点sort设置为新的位置sortthis.hdAllSettings[evt.oldIndex].sort = evt.newIndexfor (let i = evt.oldIndex + 1; i <= evt.newIndex; i++) {this.hdAllSettings[i].sort = this.hdAllSettings[i].sort - 1}}// 向上移动if (evt.oldIndex > evt.newIndex) {// 移动的节点sort设置为新的位置sortthis.hdAllSettings[evt.oldIndex].sort = this.hdAllSettings[evt.oldIndex].sort - (evt.oldIndex - evt.newIndex)for (let i = evt.newIndex; i < evt.oldIndex; i++) {this.hdAllSettings[i].sort = this.hdAllSettings[i].sort + 1}}this.hdAllSettings.sort((o1: any, o2: any) => o1.sort - o2.sort)}})}

这篇关于Vue+SortableJs实现拖拽排序的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使

如何在Java Spring实现异步执行(详细篇)

《如何在JavaSpring实现异步执行(详细篇)》Spring框架通过@Async、Executor等实现异步执行,提升系统性能与响应速度,支持自定义线程池管理并发,本文给大家介绍如何在Sprin... 目录前言1. 使用 @Async 实现异步执行1.1 启用异步执行支持1.2 创建异步方法1.3 调用

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5