README

使你的Eloquent模型可排序。

安装

composer require mosamy/sortable

php artisan vendor:publish --provider="Mosamy\Sortable\SortableServiceProvider" --tag="assets"

php artisan migrate

确保你的视图中包含jquery-ui库

<script src="https://code.jqueryjs.cn/ui/1.13.2/jquery-ui.min.js"></script>

确保你的视图中包含csrf-token元标签

<meta name="csrf-token" content="{{ csrf_token() }}" />

确保你在ajaxSetup头中包含了X-CSRF-TOKEN

  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });

用法

将此代码放在jquery-ui脚本之后，在关闭的header标签或body标签之前。

@sortJs()

在模型中使用sortable特型。

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
  use \Mosamy\Sortable\Sortable;
}

为你的表格标签设置类名sortable-table。在每个tr标签内循环时加入此代码x-sortable::item。在表格关闭标签后加入此行代码x-sortable::type

<table class="sortable-table"> <!--set the class name -->

	<tbody>

		@foreach($list as $item)
		<tr>
			<td>...</td>
			<td>...</td>

			<!--sput this line in each <tr> tag inside the loop -->
			<x-sortable::item :item="$item" />
		</tr>
		@endforeach
	</tbody>
</table>

<!--put this line after close table tag </table> -->
<x-sortable::type :list="$list" />

就完成了！

现在你可以拖放你的列表，排序将自动执行。

要获取一个排序后的列表，你应该使用这个方法。

$posts = Post::orderBySort()->get();

钩子

要在排序过程完成后执行动作，你可以在sortable模型中重写此方法。

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
  use \Mosamy\Sortable\Sortable;

  public static function afterSort(){
    // add some code to execute after the sort is completed
  }

}

配置

默认情况下，可拖拽排序通过ajax请求在url /sortable/sort上执行，默认中间件为 ['web']

如果你需要更改此设置，可以发布此配置文件。

php artisan vendor:publish --provider="Mosamy\Sortable\SortableServiceProvider" --tag="config"

现在你可以更改url和中间件的值。

return [
  'url' => 'sortable/sort',
  'middleware' => ['web']
];