JQuery UI 可排序 + Laravel 集合块：可拖动行而不是单个元素

Question

我有一个问题。当我使用 Bootstrap 时，我有每行包含 3 张图像。为了这样做（因为图像来自数据库），我使用了 Laravel 中可用的 chunk() 函数。这允许我插入一个 .row，然后显示 3 个图像，每个图像带有 .col-md-4，然后创建另一个 .row 等等。

<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>

现在我想将 jQuery UI 的 Sortable 集成到这些图像中，使用：

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

但是，它将行声明为可拖动元素，而不是产品图像框。

这里的图片有两行，第一行包含3个图片框，第二行包含一个图片框。如您所见，我正在抓取整行进行拖动，而不是单个元素。因为我正在使用 chunk() 我找不到一个很好的解决方案来使单个元素可拖动。

Answer 1

好像是自己想出来的。有一个项目选项，默认为：> *。通过设置：items: '> .row > *',我现在可以抓取单个元素了。

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

JQuery UI 可排序 + Laravel 集合块：可拖动行而不是单个元素

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

php

jquery

jquery-ui

chunks

laravel