php接口实现拖拽排序功能


Posted in PHP onApril 23, 2018

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

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

先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~

先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里。

接口设计:

//$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接口实现拖拽排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
php daodb插入、更新与删除数据
Mar 19 PHP
PHP字符串处理的10个简单方法
Jun 30 PHP
PHP If Else(elsefi) 语句
Apr 07 PHP
php笔记之:初探PHPcms模块开发介绍
Apr 26 PHP
探讨Hessian在PHP中的使用分析
Jun 13 PHP
php ckeditor上传图片文件名乱码解决方法
Nov 15 PHP
PHP获取一个字符串中间一部分字符的方法
Aug 19 PHP
php中print(),print_r(),echo()的区别详解
Dec 01 PHP
PHP中Static(静态)关键字功能与用法实例分析
Apr 05 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
Sep 30 PHP
TP5框架实现一次选择多张图片并预览的方法示例
Apr 04 PHP
PHP var关键字相关原理及使用实例解析
Jul 11 PHP
PHP基于SPL实现的迭代器模式示例
Apr 22 #PHP
PHP生成推广海报的方法分享
Apr 22 #PHP
PHP排序算法之归并排序(Merging Sort)实例详解
Apr 21 #PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
Apr 21 #PHP
Laravel模型间关系设置分表的方法示例
Apr 21 #PHP
PHP排序算法之基数排序(Radix Sort)实例详解
Apr 21 #PHP
PHP排序算法之堆排序(Heap Sort)实例详解
Apr 21 #PHP
You might like
php socket方式提交的post详解
2008/07/19 PHP
php单一接口的实现方法
2015/06/20 PHP
Yii清理缓存的方法
2016/01/06 PHP
php支付宝APP支付功能
2020/07/29 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
python的dict,set,list,tuple应用详解
2014/07/24 Python
python查询sqlite数据表的方法
2015/05/08 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python操作MySQL数据库的方法
2018/06/20 Python
Python实战之制作天气查询软件
2019/05/14 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python中Yield的基本用法
2020/10/18 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
公司活动策划方案
2014/01/13 职场文书
社区交通安全实施方案
2014/03/22 职场文书
毕业设计说明书
2014/05/07 职场文书
事业单位聘任报告
2015/03/02 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python
Python学习之包与模块详解
2022/03/19 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
python中filter,map,reduce的作用
2022/06/10 Python