列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题

如何实现才能达到效率最高呢

先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据

例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~

先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了

而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里。

接口设计:

//$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接口实现拖拽排序功能的更多相关文章

  1. RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...

  2. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  3. vue el-transfer新增拖拽排序功能---sortablejs插件

    <template> <!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 -  --> ...

  4. ListBox实现拖拽排序功能

    1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...

  5. vue2.0 不引用第三方包的情况下实现嵌套对象的拖拽排序功能

    先上一张效果图,然后再上代码(由于只做效果,未做数据相关的处理:实际处理数据时不修改 dom 元素,只是利用 dom 元素传递数据,然后需改数据,靠数据驱动效果) <div :id=" ...

  6. ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)

    ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...

  7. Sortable拖拽排序插件数据筛选

    后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...

  8. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  9. vue中基于sortablejs与el-upload实现文件上传后拖拽排序

    今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...

随机推荐

  1. 【PY】Python3.7+Anaconda3 + PyQt5 + Eric6

    Anaconda下载地址:https://www.continuum.io/downloads pip install pyenchant pip install QScintilla pip ins ...

  2. 【Common】-NO.122.common.1 - pv、uv、ip,tps、qps、rps术语

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  3. mipush ionic3 线上push

    <dict> <key>aps-environment</key> <string>production</string> </dic ...

  4. Go 初体验 - 并发与锁.1 - sync.Mutex 与 sync.RWMutex

    ==== Mutex为互斥锁,顾名思义,被Mutex锁住的代码同时只允许一个协程访问,其它协程进来就要排队 如何使用?看代码: 输出: 释义: 并发1000个协程同时更改m的元素,这样会有一部分更改成 ...

  5. C# string 常用功能的方法扩展

    #region Usings using System; using System.Text; using System.Data; using System.Data.SqlClient; usin ...

  6. SSH整合时多表关联查询出现Javassist增强失败

    Customer类对应的表为另一个表LinkMan的外键,在进行LinkMan表操作时,出现如下错误. 遇到Javassist增强失败网上说法不一,有的说Customer没有无参构造方法,javass ...

  7. datetimepicker 使用

    首先引入 <%--日历样式--%> <link rel="stylesheet" type="text/css" href="< ...

  8. elasticsearch数据备份与sshfs建立共享文件

    1.背景: 最近公司为了适应业务的发展,利用elasticsearch搜索引擎搭建了两个节点.为了防止数据丢失的特殊情况,需要定时做数据备份,而由于elasticsearch为两个节点分别在不同的服务 ...

  9. 多线程之CEvent

    最近工作中要维护一个windows模块,用到了mfc中的CEvent类.这算是很久很久以前的老朋友了吧,估计和我超过10年没见过面了,不过工作就是工作,技术上来不得半点含糊,所以还是重新认识一下这位老 ...

  10. ansible批量管理

    编写批量安装脚本 [root@m01 scripts]# vim install.sh for ip in $* do echo "=======start install to $ip = ...