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 ,用这种方式改动很大,而且感 ...
随机推荐
- 【Eclipse】-NO.163.Eclipse.1 -【Eclipse springboot 1.x 创建maven工程初始化报错】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...
- weixin://connectToFreeWifi/?apKey=协议如何跳转到微信客户端打开在wifi指定任意网页?
微信门店wifi接口,任意站跳转,跳转二维码长按识别加粉,接口支持动态传参数,支持微信支付等特殊接口对接. 代码如下使用 <head> <meta charset="utf ...
- kali,parrot最新更新debain源
deb http://mirrors.163.com/debian/ jessie main non-free contribdeb http://mirrors.163.com/debian/ je ...
- 《linux就该这么学》第十七节课:第18,19,23章,mariadb数据库、PXE无人值守安装系统和openldap目录服务。
第23章 (借鉴请改动) openldap数据的特点:1.短小.2.读取次数较多 上述说明: openLDAP服务端配置: 1.yum install -y openldap openldap ...
- ASP.NET MVC案例教程(四)
ASP.NET MVC案例教程(四) 前言 通过前几篇文章,我们已经能比较自如的使用ASP.NET MVC来呈现页面和数据了.但是,有一个大问题没有解决:如何处理表单数据.例如,我们将要实现的公告发布 ...
- Delphi使用两种不同方法获取系统端口信息--(装载)
Delphi使用两种方法获取windows系统的端口,还可测试发送消息,点击获取端口信息后,可依次得到如下信息:DCB结构大小.波特率大小.XON的临界值.XOFF的临界值.字符位数.奇偶检验位.停止 ...
- Python3标准库
文本 1. string:通用字符串操作 2. re:正则表达式操作 3. difflib:差异计算工具 4. textwrap:文本填充 5. unicodedata:Unicode字符数据库 6. ...
- python -yield理解
参考:https://foofish.net/iterators-vs-generators.html 从网上看到一个面试题,求最后的输出结果: def add(n, i): return n+ide ...
- mysql数据类型优化
选择优化的数据类型原则: 1. 更小的通常更好 尽量使用可以正确存储数据的最小数据类型.更小的数据类型通常更快,因为它们占用更少的磁盘.内存和CPU缓存,并且处理时需要的CPU周期也更少. 2. 简单 ...
- Linux编译安装python3
1.解决编译环境的,依赖环境,必须保证这里正确安装,方可执行后续步骤yum install gcc patch libffi-devel python-devel zlib-devel bzip2-d ...