如何在vue中使用拖动排序组件sortablejs

效果图:

在这里插入图片描述
1.首先,我们需要在vue项目中安装依赖:

npm install -save sortablejs

2.创建demo文件=>demoTest.vue,直接附上实例代码:

<template><div><div id="table-names"><div class="tableItem" v-for="item of tableData" :key="item.id"><span>{{ item.id }}</span>=><span>{{ item.name }}</span>=><span>{{ item.sort }}</span></div></div><el-button @click="refreshData">刷新</el-button><el-button @click="initData">取缓存</el-button></div>
</template><script>
import Sortable from 'sortablejs'
let tableDemoSort = 'DEMOSORT'
const list = [{name: 'laowang1', id: '0', sort: 1},{name: 'laowang2', id: '1', sort: 2},{name: 'laowang3', id: '2', sort: 3},{name: 'laowang4', id: '3', sort: 4}
]
export default {data(){return{tableData:[]}},computed: {},created() {this.initData()},mounted(){this.dragTable()},methods:{initData() {let stData = this.getTableDataToLocalStorage()console.log('initData=>stData', JSON.stringify(stData))if (stData) {this.tableData = JSON.parse(JSON.stringify(stData))// this.$forceUpdate()} else {this.tableData = list}this.setTableDataToLocalStorage(this.tableData)},refreshData() {this.tableData = listthis.setTableDataToLocalStorage(this.tableData)},setTableDataToLocalStorage(data) {localStorage.setItem(tableDemoSort, JSON.stringify(data))},getTableDataToLocalStorage() {return JSON.parse(localStorage.getItem(tableDemoSort))},dragTable(){let el = document.getElementById('table-names')Sortable.create(el, {animation: 200,chosenClass: "chosenClass",  // 被选中项的css 类名// dragClass: "dragClass",  // 正在被拖拽中的css类名onEnd: evt => {let {oldIndex, newIndex} = evtthis.switchMapOrder(oldIndex, newIndex)}})},switchMapOrder(oldIndex, newIndex){console.log(`oldIndex: ${oldIndex}, newIndex: ${newIndex}`)const tableData = this.tableDatalet 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 + 1newTableData.push(item)})this.tableData = newTableData// this.$forceUpdate()this.setTableDataToLocalStorage(newTableData)// this.dragTable()}}
}
</script><style>
#table-names {display: flex;flex-direction: column;
}
.tableItem{padding: 6px 10px;cursor: pointer;
}
.sortable-chosen{background-color: blue;
}/* // 拖拽 */
.dragClass {background-color: rgba(0, 188, 235, 0.5) !important;color: #0000a3 !important;
}
/* // 停靠 */
.ghostClass {background-color: rgba(0, 191, 243, 0.1) !important;
}
/* // 选择 */
.chosenClass {background-color: rgba(0, 188, 235, 0.2) !important;
}
</style>

3.提供一个列表拖动排序的文档,想要了解更多,请查看文档:http://www.sortablejs.com/options.html

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

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

相关文章

如何使用CLZero对HTTP1.1的请求走私攻击向量进行模糊测试

关于CLZero CLZero是一款功能强大的模糊测试工具&#xff0c;该工具可以帮助广大研究人员针对HTTP/1.1 CL.0的请求走私攻击向量进行模糊测试。 工具结构 clzero.py - 工具主脚本&#xff1b; default.py - 包含了大多数标准攻击测试方法和字符&#xff1b; exhaustive.py - 包…

山西电力市场日前价格预测【2024-02-08】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-02-08&#xff09;山西电力市场全天平均日前电价为200.58元/MWh。其中&#xff0c;最高日前电价为347.58元/MWh&#xff0c;预计出现在07:00。最低日前电价为0.00元/MWh&#xff0c;预计出…

蓝桥杯第八届省赛题笔记------基于单片机的电子钟程序设计与调试

题目要求&#xff1a; 一、基本要求 1.1 使用 CT107D 单片机竞赛板&#xff0c;完成“电子钟”功能的程序设计与调试&#xff1b; 1.2 设计与调试过程中&#xff0c;可参考组委会提供的“资源数据包”&#xff1b; 1.3 Keil 工程文件以准考证号命名&#xff0c;保存在…

RibbonOpenFeign源码(待完善)

Ribbon流程图 OpenFeign流程图

Yii特性

Yii几乎拥有了当今Web 2.0应用发展的全部特性。下面是这些特性的一个简短的清单。 模型-视图-控制器&#xff08;MVC&#xff09;设计模式&#xff1a;Yii在WEB编程中采用这一成熟的技术从而可以更好的将逻辑层和表现层分开。数据库访问对象&#xff08;DAO&#xff09;和Acti…

Unity学习笔记之【IK反向动力学操作】

反向动力学Inverse Kinematics 反向动力学&#xff0c;简称IK。相较于正向动力学&#xff0c;反向动力学旨在子级对父级产生的影响。 使用IK&#xff0c;可以实现根据目标位置或方向来计算并调整角色的关节&#xff08;骨骼&#xff09;链&#xff0c;以使角色的末端&#xff…

一、OpenAI API介绍

Open AI API可以应用到任何的业务场景。 文本生成 创造助理 嵌入数据 语音转化 图片生成 图片输入 1. 核心概念 1.1 Text generation models OpenAI 的文本生成模型(通常被称为generative pre-trained transformers 模型简称&#xff1a;GPT),有GPT-4和G…

(十六)springboot实战——spring securtity的认证流程源码解析

前言 本节内容是关于spring security安全框架认证流程的源码分析&#xff0c;spring security的认证流程主要是在UsernamePasswordAuthenticationFilter过滤器中实现的。我们会通过源码层级的分析&#xff0c;了解清楚spring security的底层是如何实现用户的认证的。 正文 1…

云计算运维1

1、企业服务器LNMP环境搭建 集群&#xff1a;多台服务器在一起作同样的事 。分布式 &#xff1a;多台服务器在一起作不同的事 。 环境准备&#xff1a; 1、设置静态ip&#xff08;NAT模式网关为.2&#xff09; # cat /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE"E…

【多模态大模型】Latent Diffusion:在潜在空间而非像素空间进行操作,从而减少了计算复杂度

Latent Diffusion Stable Diffusion 和 Latent Diffusion扩散模型的成本问题子问题1: 高计算成本和训练复杂度子问题2: 保持生成图像的视觉保真度子问题3: 实现多模态和高分辨率图像合成子问题4: 保持图像质量与细节Latent Diffusion 过程&#xff1a; 总结子问题/子解法1&…

识别CMS指纹与WAF识别

目录 识别CMS指纹 1 什么是CMS指纹&#xff1f; 2 常见的CMS指纹 3 识别CMS指纹的方法有哪些&#xff1f; &#xff08;1&#xff09;分析HTTP响应头&#xff0c;识别CMS的特定标头。 &#xff08;2&#xff09;通过配置文件/特殊文件 &#xff08;3&#xff09;分析网站…

SSM框架,Spring-ioc的学习(上)

知识点引入 关于框架 框架( Framework )是一个集成了基本结构、规范、设计模式、编程语言和程序库等基础组件的软件系统&#xff0c;它可以用来构建更高级别的应用程序。框架的设计和实现旨在解决特定领域中的常见问题&#xff0c;帮助开发人员更高效、更稳定地实现软件开发目…

iOS 需求 多语言(国际化)App开发 源码

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

Python:流程控制

4.1 顺序结构 在任何编程语言中最常见的程序结构就是顺序结构。顺序结构就是程序从上到下一行行地执行&#xff0c;中间没有任何判断和跳转。 如果Python程序的多行代码之间没有任何流程控制&#xff0c;则程序总是从上往下依次执行&#xff0c;排在前面的代码先执行&#xf…

第5章——深度学习入门(鱼书)

第5章 误差反向传播法 上一章中&#xff0c;我们介绍了神经网络的学习&#xff0c;并通过数值微分计算了神经网络的权重参数的梯度&#xff08;严格来说&#xff0c;是损失函数关于权重参数的梯度&#xff09;。数值微分虽然简单&#xff0c;也容易实现&#xff0c;但缺点是计…

STM32内存管理

一.什么是内存管理 内存管理是计算机系统中的一个重要组成部分&#xff0c;它负责管理计算机的内存资源。内存管理的主要目标是有效地分配、使用和释放内存&#xff0c;以满足程序的运行需求。 内存是计算机用于存储程序和数据的地方&#xff0c;它由一系列内存单元组成&#…

Flink 2.0 状态存算分离改造实践

本文整理自阿里云智能 Flink 存储引擎团队兰兆千在 FFA 2023 核心技术&#xff08;一&#xff09;中 的分享&#xff0c;内容关于 Flink 2.0 状态存算分离改造实践的研究&#xff0c;主要分为以下四部分&#xff1a; Flink 大状态管理痛点 阿里云自研状态存储后端 Gemini 的存…

利用路由懒加载和CDN分发策略对极客园项目进行性能优化

文章目录 前言1.配置路由懒加载2.项目资源打包3.包体积可视化分析4.cdn配置 总结 前言 极客园项目的完成之后&#xff0c;我们需要对项目进行打包以及性能优化&#xff0c;优化用户体验以及加快响应时间&#xff0c;本文只列举了路由懒加载和cdn分发的策略 1.配置路由懒加载 …

政安晨:快速学会~机器学习的Pandas数据技能(二)(索引、选择与赋值)

小伙伴们&#xff0c;今天这篇文章里讲到的操作&#xff0c;专业的数据科学家每天都会执行这个动作数十次。你当然也可以做到&#xff01; 概述 选择pandas DataFrame或Series中的特定值进行操作是几乎任何数据操作中的一个隐含步骤&#xff0c;因此在使用Python处理数据时&am…

怎么给《Cyberpunk 2077》制作功能性MOD

Cyberpunk的官方mod支持【REDmod】&#xff1a;https://www.cyberpunk.net/zh-cn/modding-support。官网有三个视频教程&#xff0c;其中第二集演示了脚本的替换&#xff0c;比较合程序员的胃口。 REDmod 是《赛博朋克 2077》的免费 DLC&#xff08;须购买游戏之后才能下载&am…