README

通过 composer 安装包

composer require nh/sortable

要创建一个具有位置的模型，您可以通过控制台命令创建迁移

php artisan sortable:new {model? : the name of the model}

然后，将 Sortable 特性添加到您的模型中： 默认可排序值是按升序排列的位置。特性将为您的 $fillable 数组添加位置列

use Nh\Sortable\Traits\Sortable;

use Sortable;

/**
 * Default sortable field and direction.
 * @var array
 */
protected $sortable = [
  'field' => 'position',
  'direction' => 'asc'
];

可选地，您可以在 'parent' 模型上触发事件。例如，如果您在一个 Page 模型中对 Media 模型进行排序

/**
 * Default sortable field and direction.
 * @var array
 */
protected $sortable = [
  'field' => 'position',
  'direction' => 'asc',
  'event-on-parent' => true,
  'parent' => 'mediable'
];

可选地，您还可以选择是否更新时间戳（updated_at），默认设置为 true

/**
 * Default sortable field and direction.
 * @var array
 */
protected $sortable = [
  'field' => 'position',
  'direction' => 'asc',
  'timestamp' => true
];

JavaScript & 视图

在您的 package.json 中添加依赖项

"sortablejs": "^1.10.2",

并在您的 JS 文件中添加 Sortable 脚本

import Sortable from  '../../vendor/nh/sortable/resources/js/sortable';

在您的 JS 文件中初始化 Sortable

var el = document.querySelector('#mySortable');
new Sortable(el, {
  successCallback: function(response){
      console.log('Position updated !');
  },
  errorCallback: function(response){
      console.log('You got an error');
  }
});

然后在您的视图中添加元素

• 在父元素上添加属性 data-sortable-model
• 如果需要指定排序顺序，在父元素上添加属性 data-sortable-order
• 在子元素上添加属性 data-id
• 在子元素上添加一个具有类 .drag 的元素

<ul id="mySortable" data-sortable-mode="App\Model" data-sortable-order="desc">
  <li data-id="1"><span class="drag"></span> One</li>
  <li data-id="2"><span class="drag"></span> Two</li>
  <li data-id="3"><span class="drag"></span> Three</li>
</ul>

按位置获取集合

您可以通过位置获取您的模型集合： 您可以传递 asc 或 desc 方向

$model->byPosition()
$model->byPosition('desc')

按可排序获取集合

您可以通过可排序的自定义值或默认值获取您的模型集合： 您的 $sortable 数组中的值将被用作默认值

$model->sortable()
$model->sortable('name','desc')

事件

您可以使用 SortableEvent 来触发在排序过程中发生的事件。 您可以通过传递名称、模型和受影响的模型数量

SortableEvent::dispatch('my-event', $model, $relation, 1);