通过拖动更改菜单顺序 - 拉拉维尔

Question

在我的自定义CMS中，我创建了CRUD菜单，并在前端成功显示它。

现在我试图通过在管理部分拖动这些菜单项来找到任何更改顺序的解决方案，但仍然没有运气。有谁知道如何通过拉拉维尔实现这一目标？我也使用第三方Laravel可翻译的，所以我将在下面的代码中解释：

菜单型号：

<?php
namespace App;
use IlluminateDatabaseEloquentModel;
use DimsavTranslatableTranslatable;
class Menu extends Model
{
    use Translatable;
    public $translatedAttributes = ['title', 'url', 'status'];
}

菜单翻译模型：

<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class MenuTranslation extends Model
{
    //
}

create_menus_table迁移：

<?php
use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
class CreateMenusTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('menus', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('menus');
    }
}

create_menus_translations_table迁移：

<?php
use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
class CreateMenuTranslationsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('menu_translations', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('menu_id')->unsigned();
            $table->string('locale')->index();
            // The actual fields to store the content of your entity. You can add whatever you need.
            $table->string('title');
            $table->string('url')->nullable();
            $table->string('status');
            $table->unique(['menu_id', 'locale']);
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('menu_translations');
    }
}

我的视图索引菜单：

@extends('layouts.admin')
@section('content')
  @if(session()->has('success_message'))
    <div class="alert alert-success">
      {{ session()->get('success_message') }}
    </div>
  @endif
  <h1>Users</h1>
  <a class="btn btn-primary" href="{{ route('menus.create') }}">Create new menu</a>
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Title</th>
        <th>Status</th>
        <th>Created</th>
        <th>Operations</th>
      </tr>
    </thead>
    <tbody>
      @foreach($menus as $menu)
        <tr>
          <td>{{ $menu->id }}</td>
          <td>{{ $menu->title }}</td>
          <td>{{ $menu->status ? 'Active' : 'Disabled' }}</td>
          <td>{{ $menu->created_at->diffForHumans() }}</td>
          <td>
            <a class="btn btn-primary btn-edit" href="{{ route('menus.edit' , $menu->id) }}">Edit</a>
            <form action="{{ route('menus.destroy', $menu->id) }}" method="POST">
              {{ csrf_field() }}
              {{ method_field('DELETE') }}
              <input type="submit" class="btn btn-danger btn-delete" value="Delete">
            </form>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>
@endsection

正如您在视图菜单索引中看到的，我正在显示创建的菜单项。关键是使用一些js和Ajax，我猜，并通过拖动来更改菜单表中的id或在数据库中创建新列(顺序(。

所以，问题又是：如何使用 Laravel 拖动这些菜单项并更改数据库中的顺序？

Answer 1

好吧，这不是拉拉维尔的具体问题，但这是答案。

因此，对于前端部分，您需要使用拖放插件。 例如可排序

可排序的插件为您提供拖放的所有事件。因此，您可以简单地创建一个隐藏字段，或者只是在javascript中创建一个变量，并在单击保存功能时在POST请求中传递该排序值。

现在，您需要将该数据添加到按menu_id排序的表中。通过单击保存顺序，您将发送所有新订购的元素及其各自的 id。在后端，您只需要遍历并更新这些元素。

喜欢这个：

foreach($newSort as $key => $value):
    $menuTranslation = MenuTranslation::findOrFail($key);
    $menuTranslation->update(['menu_id' => $value]);
@endforeach;

万事如意。

Answer 2

我终于解决了这个问题！

我正在为拉拉维尔使用这个插件：https://github.com/boxfrommars/rutorika-sortable

它非常适合整理雄辩。经过一些调整，大量的阅读和测试，现在它工作得很好。:)