HTML，JS：可视化的多级拖放菜单编辑器

Question

我正在构建基于laravel的cms，需要一些帮助来构建具有拖放功能的可视化（类似Wordpress）多级菜单编辑器。我为此设置了菜单项的模型：

class BeryliumItem extends Model
{
    protected $fillable = array('id', 'type', 'category', 'title', 'href', 'parent', 'menuID');

    public $timestamps = false;
}

然后编辑器视图检索这样的项目：

@php
    $ct = 0;
@endphp
@foreach (App\Extensions\Berylium\Models\BeryliumItem::where('menuID', $model->id) as $key => $item)
    @php
    $ct++;
    @endphp
    <!-- here should go the editor -->
@endforeach
@if($ct == 0)
    <div class="col s12 center text-center"><h5>{{ trans("Berylium::berylium.empty") }}</h5></div>
@endif

然后应该可以从编辑器中检索项目的顺序，以检查每个项目是否有父项（或者在菜单的第一级）。我可以使用jquery（和/或任何其他javascript库），如果它有用，该应用程序包含materializecss@0.98。你能给我一些关于如何实现这样一个编辑器的建议（请用一些代码）？