当前位置：首页 > news >正文

基于商品列表的拖拽排序后端实现

news 2025/8/24 15:09:52

一：实现思路

二：实现步骤

二：实现代码

三：注意点

一：实现思路

后台实现拖拽排序通常需要与前端进行配合，对商品的列表拖拽排序，前端需要告诉后端拖拽的元素和拖动的位置。

这里我们假设商品列表有一个sort字段作为排序，有10个商品标号1到10，当移动1到6时，我们要做的操作是把1号的sort更新为6，把1到6包含6的5个元素sort减少1,这样2号变为1号，6号变为5号，sort还是连续的。同理，把6号移动到2号时，把2到6包含2的4个元素都增加1，这样2号变为3号，5号变为6号。这样我们的顺序也是连续的。

二：实现步骤

1：确定商品的数据结构，包括商品ID、排序字段。
2：当用户在前端页面上拖拽商品进行排序时，前端应发送一个请求到后端，该请求应包含以下信息：被拖拽商品的ID、新的位置（或排序权重）。
3：后端接收前端的请求，根据请求中的商品ID和新的位置信息，更新数据库中相应的商品记录。

二：实现代码

   $goodsId = $request['goods_id'] ?? 0;
   $sort = $request['sort'] ?? 0;
   $goodsData = (new goodsModel())->where('id', $goodsId)->field('type,sort,pid')->find();
   if (!$goodsData) {
       return true;
   }
   $cSort = $goodsData['sort'];
   if ($sort > $cSort) {//从上往下拖动
       $sortList = range($cSort+1, $sort);
       if ($sortList) {
           if ($type == "field") {
               $sortWhere = [['pid','=',$goodsData['pid']],['sort','in',$sortList]];
           } elseif ($type == "group") {
               $sortWhere = [['type','=',$goodsData['type']],['sort','in',$sortList]];
           }
           (new goodsModel())->where($sortWhere)->dec('sort')->update();
       }
   } else {
       $sortList = range($sort, $cSort);
       if ($sortList) {
           if ($type == "field") {
               $sortWhere = [['pid','=',$goodsData['pid']],['sort','in',$sortList]];
           } elseif ($type == "group") {
               $sortWhere = [['type','=',$goodsData['type']],['sort','in',$sortList]];
           }
           (new goodsModel())->where($sortWhere)->inc('sort')->update();
       }
   }