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

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

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

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

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

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

接口设计:

//$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. mysql高可用研究(一) 主从+MHA架构 (转)

    最近在研究mysql的高可用架构,自己想总结下常用的高可用方案都有哪些.有哪些优缺点以及应用的场景?搞得是头昏脑涨,天昏地暗,看了诸多资料,每次都觉得公说公有理婆说婆有理.其实嘛,大家说的都有一定的道 ...

  2. 原生js标识当前导航位置(给当前导航一个className=active)

    导航html结构为: <div class="header2-nav"> <a href="index.html">首页</a&g ...

  3. supervisor无法监听uwsgi

    ➜ ~ sudo supervisorctl data_config FATAL Exited too quickly (process log may have details) data_conf ...

  4. Java基础(面试题)

    1:面向对象编程有很多重要的特性: 封装,继承,多态和抽象. 2:什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? (1)Java虚拟机是一个可以执行Java字节码的虚拟机进程.J ...

  5. springMVC--annotation

    一 解析类 ComponentScanBeanDefinitionParser component-scan标签解析类 component-scan 兼容 annotation-config ,因此前 ...

  6. MFC消息 OnCtlColor 改变控件颜色

    OnCtlColor 有以下几个宏定义 #define CTLCOLOR_MSGBOX         0    #define CTLCOLOR_EDIT           1    #defin ...

  7. #WEB安全基础 : HTTP协议 | 0x10 请求和响应报文重点结构及常见头部

    你需要认识一些常见的头部以及了解报文的详细结构 请求报文的请求行 GET/HTTP/1.1 响应报文的响应行 HTTP/1.1 200 OK 想必这些大家都知道了 请求 我访问一个页面 Host // ...

  8. centos6 更新gcc glibc2.17

    curl -Lks http://www.hop5.in/yum/el6/hop5.repo > /etc/yum.repos.d/hop5.repo yum install gcc wget ...

  9. pydemo_testMaopuSpider

    import json from multiprocessing import Pool import requests from requests.exceptions import Request ...

  10. 微信公众平台开发教程(三)_OAuth2.0认证

    一.微信授权认证 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权的两种scope的区别说明 1.以snsapi_base为s ...