开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
拖拽排序是一个很常见的功能，但是后端接口如何处理却是一个令人纠结的问题。
如何实现才能达到效率最高呢? 就比如这个效果图这样，实现上移，下移
我们先分析一个相似的场景，假如有一个页面有十条数据，所谓的拖拽就是在这十条数据来来回回的拖，但是每次拖动都会影响到其他数据例如把最后一条拖到最前面，那么后面九条就自动往后移，反之也是。
先想象一下，排序号是固定的，就好像有十把椅子，每个椅子都是固定在那里的，移动的是上面的人，这样就不会影响到其他页面的数据了而且每个人换的也是之前其他人的桌椅号码，这样也不用去想到底要加多少才能排在哪里。
接口设计：
//$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];
}
//保存到数据库省略
}
其他例子:
- 前端传递: 位置（不是id）
- 初始位置：oldIndex
- 结束位置：newIndex
<?php
/**
* @author liaosp.top
* Time: ${Date} -11:27
* version 1.0
*/
//$a1=array(10=>0,11=>1,12=>2,13=>3,14=>4);
//
//$oldValue = $a1[1];
//unset($a1[1]);
//array_splice($a1,0,0,$oldValue);
//print_r($a1);
function Sorts($oldIndex,$newIndex)
{
//数据库数据
$list = [
['id'=>1,'sort'=>1],
['id'=>2,'sort'=>2],
['id'=>3,'sort'=>3],
];
$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];
}
//保存到数据库省略
var_dump($set);
}
使用方法：
//从第一个位置移动到第二个位置
Sorts(0,1);
结果：
array(3) {
[0]=>
array(2) {
["id"]=>
int(2)
["sort"]=>
int(1)
}
[1]=>
array(2) {
["id"]=>
int(1)
["sort"]=>
int(2)
}
[2]=>
array(2) {
["id"]=>
int(3)
["sort"]=>
int(3)
}
}