实现可拖拽的页面元素排序更新数据库排序

在这里插入图片描述
摘要:

拖拽列表改变路边排序,并且更新后台数据库列表的排序,重新请求的时候获取拖拽后的排序!

Layui:
在这里插入图片描述

// 拖拽内页顺序
	list = document.querySelector('#view_side_tab');
	// 创建cruentItem存放将要拖动的元素
	let cruentItem
	// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
	list. ondragover = e => {
	    e.preventDefault();
	}
	// 拖动开始
	list.ondragstart = e => {
	    // 此处使用setTimeout延迟被拖动的原始元素的样式
	    setTimeout(() => {
	        e.target.classList.add("moving");
	    },0)
	    // 存储被拖动元素
	    cruentItem = e.target;
	    // 拖动时默认行为是复制,此处可以改为移动
	    e.dataTransfer.effectAllowed = 'move';
	}
	
	// 拖动中
	list.ondragenter = e => {
	    // 阻止默认事件,否则元素会先回到拖动开始时的位置,再到拖动结束的位置
	    e.preventDefault();
	    // 拖动事件期间排除被拖动元素自身,以及事件代理对象ul
	    if(e.target == cruentItem || e.target == list) {
	        return;
	    }
	    // list.children获取的是类数组,类数组没有数组的方法,所以要通过Array.from转换为真正的数组
	    let itmeList = Array.from(list.children);
	    // 获取当前拖动元素位置的下标
	    let tiemListIndex = itmeList.indexOf(cruentItem);
	    // 获取当前拖动元素所移动到的位置的元素的下标
	    let targetIndex = itmeList.indexOf(e.target);
	    // 如果当前拖动元素下标小于目标元素下标说明是往下移动,否则网上移动
	    if (tiemListIndex < targetIndex) {
	        console.log('往下移动');
	        // 当前拖动元素插入到目标元素前面,且nextElementSibling目标元素的下一个兄弟元素
	        list.insertBefore(cruentItem, e.target.nextElementSibling)
	    } else {
	        console.log('往上移动');
	        list.insertBefore(cruentItem, e.target)
	    }
	}
	
	// 拖动结束
	list.ondragend = e => {
	    // 结束后移除虚线样式
	    e.target.classList.remove('moving')

        $('#view_side_tab .tree-branch').each(function(e) { 
                let dataObj = {
                    id : $(this).children().eq(1).attr('page-id'),
                    title : $(this).children().eq(1).attr('page-name'),
                    sort:e+1,
                    directory_id : book_id
                }
                modifySort(dataObj)
        }); 
	}

原生js:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				width: 100%;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: blanchedalmond;
			}

			ul li {
				list-style: none;
				height: 20px;
				padding: 10px 40px;
				margin-top: 5px;
				background-color: darkgray;
			}

			.moving {
				background-color: transparent;
				color: transparent;
				border: 1px dashed black;
			}
		</style>
	</head>
	<body>
		<ul class="draList">
			<li draggable="true" class="frist"><span >水水水水水水水水</span></li>
			<li draggable="true"><span>2</span></li>
			<li draggable="true"><span>3</span></li>
			<li draggable="true"><span>4</span></li>
			<li draggable="true"><span>5</span></li>
			<li draggable="true"><span>6</span></li>
			<li draggable="true"><span>7</span></li>
			<li draggable="true"><span>8</span></li>
		</ul>
	</body>
	<script>
		$(document).ready(function() {
			// 获取列表dom
			let list = document.querySelector('.draList');
			// 创建cruentItem存放将要拖动的元素
			let cruentItem
			// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
			list.ondragover = e => {
				e.preventDefault();
			}
			// 拖动开始
			list.ondragstart = e => {
				// 此处使用setTimeout延迟被拖动的原始元素的样式
				setTimeout(() => {
					e.target.classList.add("moving");
				}, 0)
				// 存储被拖动元素
				cruentItem = e.target;
				// 拖动时默认行为是复制,此处可以改为移动
				e.dataTransfer.effectAllowed = 'move';
			}
			
			// 拖动中
			list.ondragenter = e => {
				// 阻止默认事件,否则元素会先回到拖动开始时的位置,再到拖动结束的位置
				e.preventDefault();
				// 拖动事件期间排除被拖动元素自身,以及事件代理对象ul
				if (e.target == cruentItem || e.target == list) {
					return;
				}
				// list.children获取的是类数组,类数组没有数组的方法,所以要通过Array.from转换为真正的数组
				let itmeList = Array.from(list.children);
				// 获取当前拖动元素位置的下标
				let tiemListIndex = itmeList.indexOf(cruentItem);
				// 获取当前拖动元素所移动到的位置的元素的下标
				let targetIndex = itmeList.indexOf(e.target);
				// 如果当前拖动元素下标小于目标元素下标说明是往下移动,否则网上移动
				if (tiemListIndex < targetIndex) {
					console.log('往下移动');
					// 当前拖动元素插入到目标元素前面,且nextElementSibling目标元素的下一个兄弟元素
					list.insertBefore(cruentItem, e.target.nextElementSibling)
				} else {
					console.log('往上移动');
					list.insertBefore(cruentItem, e.target)
				}
			}
			
			// 拖动结束
			list.ondragend = e => {
				// 结束后移除虚线样式
				e.target.classList.remove('moving')
				$('.draList').each(function(e) {
					console.log($(this).html())
					let domeFather = $(this).html();
					// data.push($(this).text()); 
					console.log($(domeFather).children('li').eq(0));
			
					// console.log("A",$(this).html().attr('page-id'));
					// console.log("B",$(this).html().attr('page-name'));
				});
			}
		})
		
	</script>
</html>

在这里插入图片描述

拖拽插件

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Zookeeper经典应用场景实战

Zookeeper经典应用场景实战 ZK的不足之处 watcher检测是一次性的&#xff0c;每次触发之后都需要重新注册会话超时之后没有实现重连机制异常处理繁琐仅提供byte数组类型的接口&#xff0c;没提供java实体序列化级接口创建节点时如果抛出异常&#xff0c;需要自行检查节点是否…

【深度学习】Pytorch教程(十):PyTorch数据结构:4、张量操作(1):张量形状操作

文章目录 一、前言二、实验环境三、PyTorch数据结构1、Tensor&#xff08;张量&#xff09;1. 维度&#xff08;Dimensions&#xff09;2. 数据类型&#xff08;Data Types&#xff09;3. GPU加速&#xff08;GPU Acceleration&#xff09; 2、张量的数学运算1. 向量运算2. 矩阵…

【MySQL】多表操作、事务、索引

MySQL MYSQL 多表设计 一对多插入测试数据外键约束(物理外键)使用逻辑外键 MYSQL 多表设计 一对一表结构 MYSQL 多表设计 多对多 MYSQL 多表设计 一对多 建表语句 员工表 CREATE TABLE tb_emp (id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT ID,username VARCHAR(20) N…

130 如何通过vs2017开发linux c++程序

使用VS2017开发linux下的应用程序&#xff08;C/C&#xff09;_vc_linux.exe vs2017-CSDN博客 参考上面这哥们的&#xff0c;写的很详细 前言 本文章记录如何使用VS2017进行linux应用程序的开发&#xff08;针对新手小白&#xff09;&#xff0c;VS2017能较为方便的通过SSH编辑…

强大的文本绘图——PlantUML

PlantUML是一款开源工具&#xff0c;它允许用户通过简单的文本描述来创建UML图&#xff08;统一建模语言图&#xff09;。这种方法可以快速地绘制类图、用例图、序列图、状态图、活动图、组件图和部署图等UML图表。PlantUML使用一种领域特定语言&#xff08;DSL&#xff09;&am…

【Java程序设计】【C00282】基于Springboot的校园台球厅人员与设备管理系统(有论文)

基于Springboot的校园台球厅人员与设备管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的校园台球厅人员与设备管理系统 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块&#xf…

【可申请试用】RT-Thread专业版全面支持瑞芯微RK3568系列平台并可实现混合部署...

RT-Thread 专业版是面向任务关键领域的高安全实时操作系统&#xff0c;已被广泛应用于航空航天&#xff0c;电力&#xff0c;轨交&#xff0c;车载&#xff0c;工业控制&#xff0c;新能源&#xff0c;医疗等国家重要领域&#xff0c;是各领域高可靠装备的基础核心软件。该版本…

C#,计算几何,计算机图形学(Computer Graphics)洪水填充算法(Flood Fill Algorithm)与源代码

1 泛洪填充算法(Flood Fill Algorithm) 泛洪填充算法(Flood Fill Algorithm) &#xff0c;又称洪水填充算法&#xff0c;是在很多图形绘制软件中常用的填充算法&#xff0c;最熟悉不过就是 windows 自带画图软件的油漆桶功能。 2 源程序 using System; using System.Collecti…

基于PostGIS的慢查询引起的空间索引提升实践

目录 前言 一、问题定位 1、前端接口定位 2、后台应用定位 3、找到问题所在 二、空间索引优化 1、数据库查询 2、创建空间索引 3、geography索引 4、再看前端响应 总结 前言 这是一个真实的案例&#xff0c;也是一个新入门的工程师很容易忽略的点。往往在设计数据库的…

【JVM】Java中SPI机制

打破双亲委派模型中提到SPI和JDBC相关内容&#xff0c;那么是如何打破双亲委派模型呢?本文进行一个讲解&#xff0c;在开始讲解之前&#xff0c;我们需要先了解Java中的SPI机制 是什么 SPI 全称Service Provider Interface&#xff0c;是 Java 提供的一套用来被第三方实现或…

《TCP/IP详解 卷一》第6章 DHCP

目录 6.1 引言 6.2 DHCP 6.2.1 地址池和租用 6.2.2 DHCP和BOOTP消息格式 6.2.3 DHCP和BOOTP选项 6.2.4 DHCP协议操作 6.2.5 DHCPv6 6.2.6 DCHP中继 6.2.7 DHCP认证 6.2.8 重新配置扩展 6.2.9 快速确认 6.2.10 位置信息&#xff08;LCI和LoST&#xff09; 6.2.11 移…

股票量化系统QTYX“单针探底”迎战A股V型反转|24年2月春节后第一周记录

前言 “实战案例个股画像”系列和大家分享我基于QTYX选股框架&#xff0c;在实战中选股的案例&#xff0c;和大家一起见证QTYX选股框架逐步完善的过程&#xff0c;帮助大家理解QTYX的精髓。 关于QTYX的使用攻略可以查看链接&#xff1a;QTYX使用攻略 关于QTYX初衷和精髓可以查看…

【计算机毕业设计】541鲜花商城系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

Unity 2021.3发布WebGL设置以及nginx的配置

使用unity2021.3发布webgl 使用Unity制作好项目之后建议进行代码清理&#xff0c;这样会即将不用的命名空间去除&#xff0c;不然一会在发布的时候有些命名空间webgl会报错。 平台转换 将平台设置为webgl 设置色彩空间压缩方式 Compression Format 设置为DisabledDecompre…

Java 学习和实践笔记(19):this的使用方法

this用来指向当前对象的地址。 this的用法&#xff1a; 1&#xff09;在普通方法中&#xff0c;this总是指向调用该方法的对象。在普通方法中&#xff0c;它是作为一种隐式参数一直就存在着&#xff08;这句话的意思&#xff0c;就是其实在普通方法中&#xff0c;编译器一直就…

Word第一课

文章目录 1. 文件格式1.1 如何显示文件扩展名1.2 Word文档格式的演变1.3 常见的Word文档格式 3. 文档属性理解文档属性查看文档属性 4. 显示比例方式一&#xff1a; 手动调整方式二&#xff1a; 自动调整 5. 视图、窗口视图 1. 文件格式 1.1 如何显示文件扩展名 文档格式指的…

Vue2页面转化为Vue3

vue2element-ui转化为Vue3element plus 后台管理系统&#xff1a;增删查改 vue2页面&#xff1a; <template><div class"app-container"><div><el-form:model"queryParams"ref"queryForm"size"small":inline&qu…

【人脸朝向识别与分类预测】基于LVQ神经网络

课题名称&#xff1a;基于LVQ神经网络的人脸朝向识别分类 版本日期&#xff1a;2024-02-20 运行方式&#xff1a;直接运行GRNN0503.m文件 代码获取方式&#xff1a;私信博主或 企鹅号:491052175 模型描述&#xff1a; 采集到一组人脸朝向不同角度时的图像&#xff0c;图像…

刷题日记-Day2- Leedcode-977. 有序数组的平方,209. 长度最小的子数组,59. 螺旋矩阵 II-Python实现

刷题日记Day2 977 有序数组的平方209. 长度最小的子数组59. 螺旋矩阵 II 977 有序数组的平方 链接&#xff1a;https://leetcode.cn/problems/squares-of-a-sorted-array/description/ 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组…

【Git】:初识git

初识git 一.创建git仓库二.管理文件三.认识.git内部结构 一.创建git仓库 1.安装git 使用yum install git -y即可安装git。 2.创建仓库 首先创建一个git目录。 3.初始化仓库 这里面有很多内容&#xff0c;后面会将&#xff0c;主要是用来进行追踪的。 4.配置name和email 当然也…