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

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

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

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

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

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

接口设计:

//$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. 【转】Spring Boot 构建应用——快速构建 Spring Boot 应用

    Spring Boot 简化了 Spring 应用开发,不需要配置就能运行 Spring 应用,Spring Boot 的自动配置是通过 Spring 4.x 的条件注解 @Conditional 来 ...

  2. vi命令插入

    1.插入 i :在当前光标前插入 I:在当前行的行首插入 a:在当前光标后插入 A:在当前行的行尾插入 o:在当前行的下面另起一行插入 O:在当前行的上面另起一行插入 s:删除当前光标的字符并开始插入 ...

  3. React browserHistory.push()传参

    1.browserHistory.push({                "pathname":'/interface_log',                state: ...

  4. 输入参数的默认值设定${3:-var_d}

    今天看到一个不一样的写法: if [ $# != 2 ] && [ $# != 3 ] ; then #判断参数个数    echo "Invalid Args"  ...

  5. PHP 类的命名空间 和自动载入

    PHP 类的自动载入有两种方法,__autoload() 和 spl_autoload_register() ,就是在PHP代码中new一个类的时候,会自动触发,将类的类名包括命名空间作为参数传进入方 ...

  6. HTML页面空格记录&nbsp;&ensp; &emsp; (小计)

      半角的不断行的空白格(推荐使用) 也就是咱们经常在英文状态下面使用的空格按键    半角的空格  他的宽度为中文字符的一半长度    全角的空格他的宽度为中文字符的长度

  7. Qt如何在QTabWidget上绘图

    Qt绘图事件必须在paintEvent事件下绘图,这样导致我们在向Qt设计师界面上拖拽的控件绘图时,造成了很大的麻烦. 我们不能在拖拽的控件上写paintEvent函数,但是可以自定义一个类,继承某一 ...

  8. Linq To Object 函数介绍

    static void Main(string[] args) { #region Aggregate 把集合中的元素按照表达式依次执行 { IEnumerable<int> list = ...

  9. 线性二次型调节器LQR/LQC算法解析及求解器代码(matlab)

    参考链接:http://120.52.51.14/stanford.edu/class/ee363/lectures/dlqr.pdf 本文参考讲义中的第20页PPT,根据Hamilton-Jacob ...

  10. forms-隐藏处理

    获取pin码. 查看网页源码<form action="" method="post">    PIN:<br>    <inpu ...