php接口实现拖拽排序功能
列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题
如何实现才能达到效率最高呢
先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据
例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~
先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了
而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里。
接口设计:
//$ids 这十条数据的id集合,逗号隔开的字符串
//$oldIndex 原始位置,从0开始算
//$newIndex 要拖动的位置
function dragSort($ids,$oldIndex,$newIndex)
{
//保证查找出来的数据跟前台提交的顺序一致,这里要order by field
//id 主键 sort 排序值
$sql = "select id,sort from 表名字 where id in ($ids) order by field(id, " . $ids . ") ";
$list = "这里省略,就是去数据库找嘛";
//id集合
$idArr = [];
//排序集合
$sortArr = [];
foreach ($list as $item) {
$idArr[] = $item['id'];
$sortArr[] = $item['sort'];
}
//记录要拖动的id
$oldValue = $idArr[$oldIndex];
//删除这个要拖动的id
unset($idArr[$oldIndex]);
//插入新的位置,并自动移位
array_splice($idArr, $newIndex, 0, $oldValue);
//重新设置排序
$set = [];
for ($i = 0; $i < count($idArr); $i++) {
$set[$i]['id'] = $idArr[$i];
$set[$i]['sort'] = $sortArr[$i];
}
//保存到数据库省略
}
php接口实现拖拽排序功能的更多相关文章
- RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- vue el-transfer新增拖拽排序功能---sortablejs插件
<template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - --> ...
- ListBox实现拖拽排序功能
1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...
- vue2.0 不引用第三方包的情况下实现嵌套对象的拖拽排序功能
先上一张效果图,然后再上代码(由于只做效果,未做数据相关的处理:实际处理数据时不修改 dom 元素,只是利用 dom 元素传递数据,然后需改数据,靠数据驱动效果) <div :id=" ...
- ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)
ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...
- Sortable拖拽排序插件数据筛选
后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- vue中基于sortablejs与el-upload实现文件上传后拖拽排序
今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...
随机推荐
- MySQL保留字 ERROR 1064 (42000)
在MySQL(5.7.18)数据库中建表 CREATE TABLE SA_ACT_ITEM ( ITEMID ) NOT NULL, REGION ), ACTIONID ), ITEMNAME ), ...
- day2 eclipse+gitee 操作步骤记录留档
开发的时间不固定,有时候在办公室,有时候在家里,为了保证两边的代码一致,我考虑用代码库来管理,也就是gitee,当然gitee的功能不只这个,还有团队开的时候也能用上,后面再研究一下.切入正题: 一. ...
- jquery autocomplete 设置滚动条
加入样式 .ui-autocomplete{height:250px; overflow-y: scroll; overflow-x: hidden;}
- (转)利用CAS算法实现通用线程安全状态机
在多线程环境下,如果某个类是有状态的,那我们在使用前,需要保证所有该类的实例对象状态一致,否则会出现意向不到的bug.下面是通用线程安全状态机的实现方法. public class ThreadSav ...
- 7zip 18.3性能测试
配置 7zip 18.3 bate3 的性能大幅提升,进行一点简单测试 配置为 E3 1230v2 3.5G 4核心/8线程 12G内存 均为8线程测试 压缩解压一个1.5G的虚拟机磁盘镜像 测试 再 ...
- python 七段管模块
python 七段管模块 def drawGap(): #绘制数码管间隔 turtle.penup() turtle.fd(5) def drawLine(draw): #绘制单段数码管 drawGa ...
- java 执行https的请求
普通的get和post请求只能执行http的请求,遇到的了https的就歇菜了,需要SSL安全证书处理. 该方法只能用jdk1.7和1.8进行处理,jdk1.6会报Could not generate ...
- Java 必须掌握的 20+ 种 Spring 常用注解
Spring部分 1.声明bean的注解 @Component 组件,没有明确的角色 @Service 在业务逻辑层使用(service层) @Repository 在数据访问层使用(dao层) @C ...
- jqGrid实现表头自动换行
当jqGrid表头内容过多无法全部展示时,添加以下css实现表头自动换行. <style type="text/css"> /* jqgrid 表头自动换行 */ th ...
- 火狐开发----Web开发者工具
作为开发Web相关人员,有必要了解这个开发工具,会提供给你不少的帮助,进入正题.经典的F12启动,这个大家都知道. 一 控制台可以很好的帮我们掌控错误,包括文件的加载.JS语法.CSS语法.安全问题. ...