Problem to drag items freely using Nestable2

Published

I have some troubles to drag items. I only can drag and drop it, if the item is bellow of the item root.

I want to drag items frelly, for example, i want to drag let say the last item of 4 and put it in the first place, on top.

Example of what i can and cant do

Bellow is the jquery code done in a Laravel Livewire app.

<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 is the jquery code done in a Laravel Livewire app.

$('.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();
                        }
                    })
                }
            });
        });

Source: Laravel

Published
Categorised as jquery-nestable, laravel, laravel-livewire Tagged , ,

Answers

Leave a Reply

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq