分享Laravel拖拉排序功能的实现

最新推荐文章于 2024-07-22 11:17:19 发布
最新推荐文章于 2024-07-22 11:17:19 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： PHP laravel 文章标签： php 拖拉排序 排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tim_phper/article/details/111037409
版权
本文分享了在 Laravel 中实现拖拉排序功能的思路和方法，包括排序数据的存储实现，算法选择，以及接口实现的细节。通过使用 decimal(11,4) 类型的 sort 字段保持唯一性，并讨论了浮点数排序的优化空间和重置策略，以应对大量数据的排序更新问题。" 112174943,10325282,AE蒙版与遮罩详解：兄弟间的失散与重逢,"['视频编辑', '特效处理', 'Adobe After Effects', '图形处理']
摘要由CSDN通过智能技术生成

概述：

最近公司的后台管理新需求是做一个某列表的拖拉排序功能，本来认为这个功能实现也挺简单的，但实际做起来，其实也会遇到一些问题。因此，我决定写篇文章来给大家分享一下。

准备：

1、排序的数据存储实现分析：

既然是排序，那么就是要求每行数据要有明确的前后区分，也就是要求排序的字段有唯一性，唯一性当然会想起表主键id,但是我们不可能对主键进行修改的，这样会导致一些根据主键关联的可能会出现问题。
那我们只能创建一个新的字段decimal(11,4)类型的sort，并且建立唯一索引，来区分这个排序了。这里为什么是decimal(11,4)类型，而不是int类型呢，这个我会在文章后面解释。

2、排序的算法选择：

原始排序
假设我这里的排序是[24=>1,19=>2,18=>3,17=>4,16=>5,15=>6]
拖拉排序有可能是拖到第一条，也有可能拖到最后一条，还有可能拖到中间一条。
但是无论数据从哪个位置拖到新位置，无非是在新位置的前后两条排序中间创建一个新的排序，而它旧的排序就删除。
比如说我这里的id15想要拖到id19与id18之间：

最低0.47元/天 解锁文章
Tim_PHPer
关注
专栏目录
Laravel框架冒泡排序
NYYandYF的博客
03-08 348
1. 在 web.php 中定义路由 Route::get('sort',"Three\ThreeController@sort"); 2.在控制器Three\ThreeController.php下写一个方法sort <?php namespace App\Http\Controllers\Three; use App\Http\Controllers\Controller;...
Java实现拖拽列表项的排序功能
08-31
们需要在后端处理拖拽事件，...理解这些原理后，无论是JavaFX还是Swing，甚至是其他平台的UI框架，都能灵活地实现拖拽排序功能。通过这个功能，我们可以提高用户的交互体验，让他们能更直观、便捷地调整列表项的顺序。
laravel-admin-listbox-sortable:ListboxSortable是基于Laravel-admin表单组件的扩展，实现了listbox的拖拽排序功能
05-28
ListboxSortable for Laravel-admin 1.6+ ListboxSortable是基于Laravel-admin表单组件的扩展，实现了listbox的拖拽排序功能。 Require Laravel-admin >= 1.6 Installation 运行下面的命令安装: "composer require ckhan/laravel-admin-listbox-sortable" 然后，运行下面的命令发布静态文件: "php artisan vendor:publish --provider=CKHan\ListboxSortable\ListboxSortableServiceProvider --force" Configuration 不需要其他额外的配置 Usage 使用方法和Laravel-admin中表单组件listbox是一致的: $for
laravel 排序
weixin_44269690的博客
04-15 895
$arr = [ ['sort' => '2020-11-9'], ['sort' => '2020-11-10'], ['sort' => '2020-11-11'] ]; $r = collect($arr)->sortByDesc(function ($value) { return strtotime($value['sort']); })->values()->all(); dd($r);
Java实现列表拖拽
最新发布
echola_mendes的博客
07-22 527
在项目中，需要实现列表的上下拖拽，就是将活动当前id和目标id进行上下挤压，重新排序，每一个活动都有一个序号。直接使用Sortutils.sort工具类即可实现活动列表的拖拽功能。：将活动1拖拽到活动3的位置时，应该是活动2、活动3、活动1。：将活动3拖拽到活动1的位置时，应该是活动3、活动1、活动2。1、首先需要将需要活动id以及活动序号，添加上注解。保证分页进行拖拽后排序也是有效的。
laravel排序，分页
温柔雨哥的博客
12-12 2005
1.排序 1.1正序 //排序从小到大（正序） $res = Post::all()->sortBy('id')->values(); 1.2倒序 //排序从大到小（倒序） $res = Post::all()->sortByDesc('id')->values(); 2.分页 2.1每页显示几条数据 $res=Post::skip(5)->ta...
拖拽排序
慕禾⑦叶
02-11 859
ListDrag.js import React, { Component } from 'react'; import { Form, Input, Tag } from 'antd'; class ListDrag extends Component { state = { dataNew: [], dataTemp: [], p...
QT是实现图片得拖拉功能
03-16
在IT领域，特别是图形用户界面（GUI）开发中，实现拖放（Drag and Drop）功能是一项常见的需求。本文将深入探讨如何使用Qt框架来实现图片的拖放操作，并结合Visio流程图的设计理念，创建一个允许用户自由拼接图片的...
HTML5 js实现拖拉上传文件功能
10-20
HTML5的拖拉上传功能是现代网页开发中的一个重要特性，它允许用户通过拖放操作将文件从本地文件系统直接上传到网页。这个功能极大地提升了用户体验，简化了传统的文件选择过程。下面我们将详细讨论如何利用HTML5和...
Android实现图片拖拉功能
08-28
Android 实现图片拖拉功能 Android 实现图片拖拉功能是一种常见的交互方式，能够提高用户体验。下面将详细介绍 Android 实现图片拖拉功能的相关知识点。 一、图片拖拉功能的原理 图片拖拉功能的实现主要基于矩阵...
php laravel 排序,Laravel sql 排序
weixin_42509815的博客
03-17 644
刚开始用laravel写server, 这里有两张表aws_users, lecture_share_info,aws_users表里有用户的一些信息, lecture_share_info表记录好友关系(一个用户有多个好友, user_id, friend_id都关联至aws_users里的uid)现在需要获取lecture_share_info表里某个user对应的所有friends的头像, ...
laravel-sort:按雄辩的模型记录的属性或关系对它们进行排序
03-17
按雄辩的模型记录的属性或关系对它们进行排序 概述 该软件包使您可以按其属性或它们之间的关系对Eloquent模型记录进行排序。 可以按以下类型对关系类型进行排序： hasOne ， belongsTo 安装 通过Composer安装软件包： composer require neurony/laravel-sort 用法 步骤1 您的Neurony\Sort\Traits\IsSortable模型应使用Neurony\Sort\Traits\IsSortable特性。 <?php namespace App ; use Illuminate \ Database \ Eloquent \ Model ; use Neurony \ Sort \ Traits \ IsSortable ; class YourModel extends Model { use IsSorta
[Android实例] 可拖拉排序的ListView DragDropView.rar
04-08
[Android实例] 可拖拉排序的ListView DragDropView.rar
laravel 模型查询按照whereIn排序的示例
01-03
实例如下所示： $ids = [5,7,3,1,2]; $data = Content::whereIn('id',$ids) ->select('id') ->get(); //查询结果是想按照wherein的顺序排序 //正确写法 $data = Content::whereIn('id',$ids) ->select('id') // ->orderBy(\DB::raw('FIND_IN_SET(id, ' . implode(,, $ids) . '' . ))) // ->orderBy(DB::raw(FIND_IN_SET(id,
rutorika-sortable, 向 Laravel Eloquent模型添加可以排序的行为 演示 http.zip
09-18
rutorika-sortable, 向 Laravel Eloquent模型添加可以排序的行为 演示 http Laravel 5---演示http://sortable5.boxfrommars.ru/http://sortable5.boxfrommars.ru/grouped ( 可以排序的组演示)http
Laravel 5.1分类排序
weixin_34390996的博客
10-24 198
其实排序很简单，就是将需要排序的ID和排序的值一一对应更新就OK了。 模板页面(index.blade.php) {!! Form::open( array('url' => 'admin/category/sort/', 'method' => 'put') ) !!} @foreach($categories as $c...
php laravel 排序,Laravel 5.1分类排序
weixin_42486913的博客
03-17 414
其实排序很简单，就是将需要排序的ID和排序的值一一对应更新就OK了。模板页面(index.blade.php) {!! Form::open( array('url' => 'admin/category/sort/', 'method' => 'put') ) !!}@foreach($categories as $category){{--此处省略一些字段--}}@endfor...
php laravel 排序,php – Laravel排序关系
weixin_39775428的博客
03-17 194
如何使用相关表对结果进行排序？我有这个表：客户和经理(用户表)Client.PHPPHPclass Client extends Eloquent {protected $table = 'clients';public function Manager(){return $this->belongsTo('User','manager','id');}public function Tra...
laravel中collection对象的sort用法 避免排序无效的情况
yangshuolll的专栏
04-22 4154
使用sort完后，还需要调用values方法（这样才能完成数组下标的有序排列），然后将返回的值赋值给新变量即可。 详情见下图 代码示例
vue实现拖拉拽功能
09-07
Vue可以通过使用指令和事件来实现拖拽功能。以下是一种常见的实现方式： 1. 在需要拖拽的元素上添加一个`v-draggable`指令，用于启用拖拽功能。 ```html <div v-draggable>可拖拽的元素</div> ``` 2. 创建一个自定义指令`v-draggable`，并在该指令中处理相关的事件和逻辑。 ```javascript Vue.directive('draggable', { bind(el, binding, vnode) { el.style.position = 'absolute'; el.style.cursor = 'move'; const startX = 0; const startY = 0; const handleMouseDown = (e) => { startX = e.clientX - el.offsetLeft; startY = e.clientY - el.offsetTop; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; const handleMouseMove = (e) => { el.style.left = e.clientX - startX + 'px'; el.style.top = e.clientY - startY + 'px'; }; const handleMouseUp = () => { document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; el.addEventListener('mousedown', handleMouseDown); }, }); ``` 3. 在Vue实例中使用自定义指令`v-draggable`。 ```html <template> <div> <div v-draggable>可拖拽的元素</div> </div> </template> <script> export default { // ... }; </script> ``` 这样，当你在浏览器中拖动"可拖拽的元素"时，它会随着鼠标移动而改变位置。你可以根据自己的需求进行样式和逻辑的调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值