Search code examples
phpjquerylaraveljquery-uichunks

JQuery UI Sortable + Laravel Collection Chunk: Rows draggable instead of single elements

I've got a Problem. As I am using Bootstrap, I have rows containing 3 images each. In order to do it like this (because the images come from the databse) I'm using the chunk() function available in Laravel. This allows me to insert a .row, then show 3 images with a .col-md-4 each and then creates another .row and so on.

<div id="sortable-image-container">
    @foreach($product->images->chunk(3) as $chunk)
        <div class="row">
            @foreach($chunk as $image)
                <div class="col-md-4">
                    <div class="card">
                        <div class="header text-right">
                            <a href="{{ route('products.imageDelete', ['pid' => $product->id, 'iid' => $image->id]) }}" class="btn btn-danger">X</a>
                        </div>
                        <div class="content">
                            <img src="http://placehold.it/500x500" alt="" class="center-block img-responsive">
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endforeach
</div>

Now I want to integrate jQuery UI's Sortable to those images using:

$('#sortable-image-container').sortable({});

However, it declares a row as a draggable element, instead of a product-image box.

enter image description here

In the picture here are two rows, the first containing 3 images boxes and the second one image box. as you can see I am grabbing the entire row to drag instead of a single element. Because I'm using chunk() I can't find a nice solution to make single elements draggable.

Solution

  • Seem to have figured it out by myself. There is an items option which defaults to: > *. By setting: items: '> .row > *', I can now grab single elements.

        $('#sortable-image-container').sortable({
        items: '> .row > *'
    });