从0到1完成一个Vue后台管理项目(二十二、列表拖拽排序SortableJS)

news2024/12/28 18:56:28

往期

从0到1完成一个Vue后台管理项目(一、创建项目)

从0到1完成一个Vue后台管理项目(二、使用element-ui)

从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库)

从0到1完成一个Vue后台管理项目(四、引入axios、配置路由)

从0到1完成一个Vue后台管理项目(五、登录页(表单校验的使用和封装))

从0到1完成一个Vue后台管理项目(五、登录页,mock,token,axios封装)

从0到1完成一个Vue后台管理项目(六、404页)

从0到1完成一个Vue后台管理项目(七、Header、Footer、页面布局)

从0到1完成一个Vue后台管理项目(八、Menu改造完善、子组件创建、配置路由)

从0到1完成一个Vue后台管理项目(九、引入Breadcrumb面包屑,更改bug)

从0到1完成一个Vue后台管理项目(十、列表API封装、Table列表渲染、表格数据转换)

从0到1完成一个Vue后台管理项目(十一、前端分页实现)

从0到1完成一个Vue后台管理项目(十二、学生table列表删除、查询、重置)

从0到1完成一个Vue后台管理项目(十三、信息列表页面实现:对话框新增、DateTimePicker 日期时间选择器)

从0到1完成一个Vue后台管理项目(十四、对话框封装、接口联通、api优化 很重点(封装思想))

从0到1完成一个Vue后台管理项目(十五、作业列表、表格数据方法的封装)

从0到1完成一个Vue后台管理项目(十六、后端分页方法以及分页组件的封装以及复用)

从0到1完成一个Vue后台管理项目(十七、使用Echarts:柱状图、折线图)

从0到1完成一个Vue后台管理项目(十八、基础地图绘制)

从0到1完成一个Vue后台管理项目(十九、地图区域样式设置、区域文字和立体设置)

从0到1完成一个Vue后台管理项目(二十、地图涟漪、线图)

从0到1完成一个Vue后台管理项目(二十一、网上地图资源、树形控件及路由权限分析、路由守卫)

安装SortableJS

cnpm install sortablejs --save

官网:Sortable.js中文网 (sortablejs.com)
这是翻译过来的,所以我看到了有趣的一幕
在这里插入图片描述

在这里插入图片描述

引入

在这里插入图片描述

使用

在这里插入图片描述

我们加一个排序的按钮,并且给这个按钮加个图标和类名,这个类名很重要,用来做拖拽的时机

在这里插入图片描述

我们在mounted的时候使用,因为这个时候列表的dom结构是加载完了的

在这里插入图片描述
具体的API大家去看文档即可

onEnd是拖拽后的处理,这个一般需要对接后台去处理,所以这里的仅供参考,具体需要看你们的业务

在这里插入图片描述

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

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

相关文章

Python WebGL 3D应用开发快速入门

在本文中,我们将学习如何在Python中使用three.js库,而无需编写任何一行 JavaScript。我们将使用PyWeb3D,这是一个额外的层,旨在与Brython的three.js轻松交互。 1、什么是PyWeb3D? 简单地说,PyWeb3D是一个…

现代JavaScript,你应该使用的10件事

javascripttip(3 部分系列)1现代 JavaScript,你应该使用的 10 件事,从今天开始2了解如何在 JavaScript 中使用循环3如何在 JavaScript 中学习足够多的 RegEx 才能变得危险您可能对 JavaScript 完全陌生,也可能多年来只…

文件学习笔记

删除线格式 ## 文件描述符 1.文件文件内容文件属性。 2.文件操作文件内容的操作文件属性的操作。 3.所谓的“打开”文件,是指将文件的属性或内容加载到内存中—这是由冯诺依曼决定。 4.所以文件不全打开,不打开的文件放在磁盘存储。 5.内存文件&#xff…

在线教育-谷粒学院学习笔记(三)

文章目录1 搭建前端项目环境2 前端页面框架介绍3 讲师管理前端开发4 后台系统登录功能改造到本地5 前端框架开发过程6 讲师列表前端实现7 讲师分页前端实现8 讲师条件查询前端实现9 讲师删除功能前端实现10 讲师添加前端实现11 讲师修改前端实现12 前端路由切换问题解决1 搭建前…

Linux工具学习之【gdb】

✨个人主页: Yohifo 🎉所属专栏: Linux学习之旅 🎊每篇一句: 图片来源 🎃操作环境: CentOS 7.6 阿里云远程服务器 Whatever is worth doing is worth doing well. 任何值得去做的事情&#xff0…

【HTML】一款可交互的响应式登陆注册表单,你确定不来看看嘛(附源码)

💂作者简介: THUNDER王,一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读,同时任汉硕云(广东)科技有限公司ABAP开发顾问。在学习工作中,我通常使用偏后…

2022年五一杯数学建模C题火灾报警系统问题求解全过程论文及程序

2022年五一杯数学建模 C题 火灾报警系统问题 原题再现: 二十世纪90年代以来,我国火灾探测报警产业化发展非常迅猛,从事火灾探测报警产品生产的企业已超过100家,年产值达几十亿元,已经成为我国高新技术产业的一个组成…

Docker之Nginx部署前端项目

目录 创建nginx容器 nginx.conf讲解 ①所有配置必须以“;”结尾 ②nginx发布java项目 nginx发布静态vue项目 nginxtomcat实现反向代理及均衡 nginxhtml静态服务器 创建nginx容器 docker run –name mynginx -d -p 80:80 -v /data/nginx/conf/nginx.conf:/etc/nginx/ngin…

6款强烈推荐的 SD卡/内存卡数据恢复软件

SD卡/内存卡在 21 世纪的作用比以往任何时候都更加重要。众所周知,SD卡/内存卡具有高数据传输率并且是便携式设备,大多数摄影师甚至智能手机用户主要依靠它们来保存所有个人或项目照片和视频。此外,SD 卡还因其与各种设备的兼容性而广受欢迎。…

JUC并发编程学习笔记——AQS个人理解

1. AQS引出 1.1 前置知识: 线程创建的四种方式:Thread、Runnable、callable、线程池 LockSupport的使用:park()和unpark()方法 LockSupport是一个工具类, 提供了基本的线程阻塞和唤醒功能,它是创建锁和其他同步组件的…

使用 NVIDIA NeuralVDB优化大规模稀疏

使用 NVIDIA NeuralVDB优化大规模稀疏 基于 OpenVDB 过去十年的发展,NVIDIA NeuralVDB 的推出对于处理极其庞大和复杂的数据集的开发人员和研究人员来说是一个游戏规则的改变者。 NVIDIA NeuralVDB 的预发布版本为 OpenVDB 带来了 AI 和 GPU 优化,将烟雾…

【OpenCV】:OpenCV人脸识别项目杂记

项目目标: 1.图片人脸识别 2.视频人脸识别 3.ESP32Cam摄像头网页视频人脸识别 项目效果视频: ESP32Cam摄像头人脸识别OpenCV本地视频人脸识别ESP32Cam摄像头人脸检测项目基础代码内容: 一、读取图片 # 导入cv模块 import cv2 as cv# 读取图…

如何设置Excel表格以“只读模式“打开

设置Excel表格以“只读模式”打开,可以防止意外修改表格内容,因为“只读模式”下的Excel无法直接保存,这样就不用担心表格意外修改,关闭时又不小心保存了。 这个模式我们可以通过“另存为”的方法来设置。 打开Excel表格后&…

【学习笔记之Linux】工具之gcc/g++

背景知识: gcc/g是一个编译器,注意区分编译器和编辑器,vim是是编辑器。简单的说,编辑器是我们敲代码的工具,我们在编辑器上写出我们需要实现的功能;编译器负责实现功能,把我们写的高级语言编译成…

马蹄集 古人的剩余定理

古人的剩余定理 难度&#xff1a;白银 ©时间限制&#xff1a;1秒 巴占用内存&#xff1a;64M 今有物不知其数&#xff0c; 三三数之剩二&#xff0c; 五五数之剩三&#xff0c; 七七数之剩二。 问物最少几何&#xff1f; #include <bits/stdc.h> using nam…

使用Paddle飞桨重写波士顿房价预测案例

1.Paddle飞桨设计之“道” 当读者使用飞桨框架编写多个深度学习模型后&#xff0c;会发现程序呈现出“八股文”的形态。即不同的程序员、使用不同模型、解决不同任务的时候&#xff0c;他们编写的建模程序是极其相似的。虽然这些设计在某些“极客”的眼里缺乏精彩&#xff0c;…

XJar加密工具java打的包jar包加密运行,防止反编译

XJar功能特性 基于对JAR包内资源的加密以及拓展ClassLoader来构建的一套程序加密启动&#xff0c;动态解密运行的方案&#xff0c;避免源码泄露以及反编译。支持Maven插件加密过程需要Go环境&#xff1b;加密后生成Go启动器&#xff0c;保护密码不泄露GitHub: GitHub - core-l…

JSP SSM网上预约挂号系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSPSSM网上预约挂号系统 是一套完善的系统源码&#xff0c;对理解JSP java SrpingMVC mybiats 框架 MVC编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;以及相应配套的设计文档 &#xff0c;系统主要采用B/S模式开发。研究的基本内容…

马蹄集 非常大的N

非常大的N 难度&#xff1a;白银 时间限制&#xff1a;1秒 巴占用内存&#xff1a;64M 编写程序求11/2-21/231/2-41/251/2..N1/2。 格式 输入格式&#xff1a;输入为正整数 输出格式&#xff1a;输出为浮点型&#xff08;保留六位小数&#xff09;。 #include <bits/stdc.h…

系统排障掉坑背锅?亚马逊云科技要为开发者研发提效了

出品 | CSDN 云计算任何中大型企业里的 IT 系统&#xff0c;都会有多个业务应用、多种开发语言、技术栈并存。尤其要进入云上现代化应用开发的企业和开发者&#xff0c;将面对云原生庞杂的技术分支。开发者的苦与痛&#xff1a;非功能性研发、故障排查被甩锅然而&#xff0c;IT…