我在拖动项目时遇到了一些麻烦。如果该项目位于项目根目录的下方,我只能拖放它。
我想自由地拖动项目,例如,我想拖动 4 的最后一个项目并将其放在首位,在顶部。
Bellow 是在 Laravel Livewire 应用程序中完成的 jquery 代码。
<div class="parameters-bars list-group-flush menu-sort-container" style="border: none;background: none">
<ol class="dd-list card-header">
@foreach($parentParameters as $parameter)
<li class="dd-item list-group-item" data-id="{{$parameter->id}}" style="border:none;background:none">
<div class="dd-handle">
{{$parameter->name->{getLang()} }}
@if($deleted_status == 'false')
<span class="badge badge-light badge-pill float-right dd-nodrag">
<button class="form-delete-parameter" parameter-id="{{$parameter->id}}" style="border: none;background: none">
<i class="fas fa-trash-alt"></i>
</button>
</span>
<span class="badge badge-light badge-pill float-right dd-nodrag"><a href="{{route('parameters.show',['id' => $parameter->id])}}">
<button class="form-view" style="border: none;background: none">
<i class="fas fa-eye"></i>
</button>
</a>
</span>
@else
<span class="badge badge-light badge-pill float-right dd-nodrag">
<button class="form-restore-parameter" parameter-restore-id="{{$parameter->id}}" style="border: none;background: none">
<i class="fas fa-trash-restore-alt"></i>
</button>
</span>
@endif
</div>
@if($parameter->subcategory and $parameter->subcategory->count())
<ol class="dd-list list-group card-header">
@include('catalogs::livewire.subcatalogs',['subcategories' => $parameter->subcategory])
</ol>
@else
</li>
@endif
@endforeach
</ol>
</div>
Bellow 是在 Laravel Livewire 应用程序中完成的 jquery 代码。
$('.parameters-bars').nestable({
maxDepth:10,
//handleClass:'dd-handle',
//expandBtnHTML: '<button data-action="expand"><i class="fas fa-grip-vertical"></i>></button>',
//collapseBtnHTML: '<button data-action="collapse">Collapse</button>',
callback: function(l,e){
var _arr = $('.parameters-bars').nestable('toArray');
console.log('Parameters-bars', _arr)
$.ajax({
type: "POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "parameters/updateorder",
data:{arr:_arr},
//contentType: 'application/json',
dataType:'json',
success: function(data)
{
//console.log(data.success);
//alert('success');
},
error: function(error){
console.log(error.fail);
//alert('fail');
//location.reload();
}
})
}
});
});