基于商品列表的拖拽排序后端实现

news2024/9/28 21:23:32

目录

一:实现思路

二:实现步骤

二:实现代码

三:注意点


一:实现思路

后台实现拖拽排序通常需要与前端进行配合,对商品的列表拖拽排序,前端需要告诉后端拖拽的元素和拖动的位置。

这里我们假设商品列表有一个sort字段作为排序,有10个商品标号1到10,当移动1到6时,我们要做的操作是把1号的sort更新为6,把1到6包含6的5个元素sort减少1,这样2号变为1号,6号变为5号,sort还是连续的。同理,把6号移动到2号时,把2到6包含2的4个元素都增加1,这样2号变为3号,5号变为6号。这样我们的顺序也是连续的。

二:实现步骤

1:确定商品的数据结构,包括商品ID、排序字段。
2:当用户在前端页面上拖拽商品进行排序时,前端应发送一个请求到后端,该请求应包含以下信息:被拖拽商品的ID、新的位置(或排序权重)。
3:后端接收前端的请求,根据请求中的商品ID和新的位置信息,更新数据库中相应的商品记录。
 

二:实现代码

    $goodsId = $request['goods_id'] ?? 0;
    $sort = $request['sort'] ?? 0;
    $goodsData = (new goodsModel())->where('id', $goodsId)->field('type,sort,pid')->find();
    if (!$goodsData) {
        return true;
    }
    $cSort = $goodsData['sort'];
    if ($sort > $cSort) {//从上往下拖动
        $sortList = range($cSort+1, $sort);
        if ($sortList) {
            if ($type == "field") {
                $sortWhere = [['pid','=',$goodsData['pid']],['sort','in',$sortList]];
            } elseif ($type == "group") {
                $sortWhere = [['type','=',$goodsData['type']],['sort','in',$sortList]];
            }
            (new goodsModel())->where($sortWhere)->dec('sort')->update();
        }
    } else {
        $sortList = range($sort, $cSort);
        if ($sortList) {
            if ($type == "field") {
                $sortWhere = [['pid','=',$goodsData['pid']],['sort','in',$sortList]];
            } elseif ($type == "group") {
                $sortWhere = [['type','=',$goodsData['type']],['sort','in',$sortList]];
            }
            (new goodsModel())->where($sortWhere)->inc('sort')->update();
        }
    }

三:注意点

这里我们使用sort作为排序,要保证sort的连续性,如果增加和删除了商品,要实时的更新sort的值。

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

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

相关文章

Java多线程技术11——ThreadPoolExecutor类的使用1

1 概述 ThreadPoolExecutor类可以非常方便的创建线程池对象,而不需要程序员设计大量的new实例化Thread相关的代码。 2 队列LinkedBlockingQueue的使用 public class Test1 {public static void main(String[] args) {LinkedBlockingQueue queue new LinkedBlocki…

Activity启动流程

早就想写这个笔记用于记录这段知识,但是碍于太过庞大所以始终没有进行这段知识的整理 很多博客喜欢画一个时序图展示所有的流程,但是过于庞大,看起来有点吃力,这里我们画多个时序图来展示这个流程 1.app请求AMS启动Activity 在前…

特征工程筛选重要变量

特征筛选主要分为3个方法:过滤法、嵌入法(经典的一些树模型比如xgboost)、包裹法(经典的RFECV,RFE递归特征消除法) 过滤法更快速,但更粗糙。 包装法和嵌入法更精确,比较适合具体到算…

P1262 间谍网络

1、思路 阅读题目,发现有些间谍可以是被前面的点更新,也就是说,在一开始的时候,把能贿赂的人员从小到达排个序,再使用bfs算法,把他们能到达的人员的贿赂价钱设置为0。 有解的情况: 首先如果有…

JavaScript:Date 对象-时间日期

Date 对象-时间日期: - JS中所有的关于时间信息都需要通过Date对象来表示 // 创建一个Date对象 // 如果直接使用new Date()创建时间对象,它会默认创建一个表示代码执行时刻的对象var d new Date();// 如果希望创建一个指定的时间的Date的对象,需要传递…

python总结-装饰器

装饰器 装饰器解决日志问题(分三个版本)多个装饰器带参数的装饰器wraps装饰器内置装饰器property装饰器staticmethod装饰器classmethod装饰器 类装饰器缓存装饰器和计时装饰器综合练习 概念 装饰器来自 Decorator 的直译。什么叫装饰,就是装点…

【tkinter 电子时钟 实现时间日期 可实现透明 无标题栏】

下面是一个使用tkinter实现的简单的电子时钟,包括时间和日期的显示。该窗口是透明的,没有标题栏。 效果: import tkinter as tk from datetime import datetimedef update_time():now datetime.now()time_label.configure(textnow.strftim…

【一】使用vue-cli创建vue3的helloworld项目

不再推荐使用vue-cli命令创建vue3的项目,vue-cli 是 Vue 早期推出的一款脚手架,使用 webpack 创建 Vue 项目。后期推荐使用 create-vue,create-vue 是 Vue3 的专用脚手架,使用 vite 创建 Vue3 的项目(关注【二】使用create-vue创建…

操作系统期末复习笔记(持续更新..)

一、操作系统的基本概念 1.1 操作系统概念 控制和管理整个计算机系统的硬件与软件资源。合理地组织、调度计算机的工作与资源。为用户和其他软件提供方便接口与环境的程序集合。 1.2 操作系统的特征 特征:并发,共享,虚拟,异步…

每日算法打卡:数的三次方根 day 7

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例:输出样例: 题目分析示例代码 原题链接 790. 数的三次方根 题目难度:简单 题目描述 给定一个浮点数 n,求它的三次方根。 输入格式 共一行,包含一个浮…

如何将手机中termux用电脑的vnc显示

在电脑中我们同样需要下载 vnc 这里填写手机上的 IP:端口号 我的是 10.11.166.219:5902 下面填名字然后 手机端 输入sshd开始ssh这边就可以连接啦

【ARM 处理器】程序存储详解

本篇文章主要介绍ARM处理器,Code, RO-data,RW-data,ZI-data 知识以及程序存储情况 目录 1. 专业词汇2. 程序存储3. 程序空间计算 1. 专业词汇 Code : 代码区,存储在 ROM 区域RO-data:Read Only data,即只读数据域&…

2024年虚拟DOM技术将何去何从?

从诞生之初谈起,从命令式到声明式,Web开发的演变之路 Web开发的起源与jQuery的统治 在Web开发的早期阶段,操作DOM元素主要依赖命令式编程。当时,jQuery因其易用性而广受欢迎。使用jQuery,开发者通过具体的命令操作DOM&…

qt自定义控件的封装

刚学了一个很有意思的东西,前面学了list,Tree,Table三大控件和一部分常用基础控件,但感觉没啥意思,就是用别人的直接用,刚学了一个自定义控件的封装,流程如下: 想把两个不相关的组件封装在一块,直接用ui不行,所以先新添加了qt设计师页面,新添加了一个SmallWidget *ui 在smal…

FCN-8s源码理解

FCN网络用于对图像进行分割,由于是全卷积网络,所以对输入图像的分辨率没有要求。本文重点对fcn8s.py中图像降采样和上采样后图像分辨率的变换进行理解。 相关知识 为准确理解图像分辨率的变换,对网络结构中影响图像分辨率变换的几个函数进行…

Linux基础命令@echo、tail、重定向符

目录 echo概念语法作用演示一演示二 反引号作用 tail概念语法作用不带选项,演示一带选项 -num,演示二带选项 -f , 持续跟踪 重定向符概念作用覆盖重定向,>演示一演示二 追加重定向,>>演示一演示二 总结 echo …

腾讯云取消免费10G CDN流量包:免费CDN时代结束

关注卢松松,会经常给你分享一些我的经验和观点。 免费送了7-8年的腾讯云10G免费流量包,从2024年开始,停止赠送了!自此,国内绝大多数互联网大厂的CDN都开收费了! 大概从2016年开始,腾讯云为了抢夺CDN客户&#xff0…

CentOS使用docker安装mysql并使用navicat 远程链接

这篇文章没用开启mysql的挂载功能,如果想开启的话可以和我的下篇文章结合着看。 CentOS中开启mysql挂载-CSDN博客 docker在之前的文章中已经安装完成了 这里输入命令查询已被上传的MySQL镜像 docker search mysql这里stars代表点赞数,official代表官…

瓢虫目标检测数据集VOC格式400张

瓢虫,一种小巧玲珑、色彩鲜艳的昆虫,因其独特的形态和生态习性而受到广泛欢迎。 瓢虫的体型小巧,一般为圆球形,体色鲜艳,有红、黄、黑等多种颜色。它们通常有一个坚硬的外壳,可以保护自己不受天敌的侵害。…

一文讲透使用SPSS统计分析软件绘制双轴线图

双轴线图主要用来展示两个因变量和一个自变量的关系,并且两个因变量的数值单位不同时的情形。具体来说,双轴线图是指在一幅图上有一个横轴和两个纵轴,适用于三个变量。两个纵轴分别表示一个变量,横轴变量同时适用于两个纵轴上的变…