JQuery UI Sortable + Laravel Collection Chunk：行可拖动而不是单个元素

Posted 2023-03-14

【中文标题】JQuery UI Sortable + Laravel Collection Chunk：行可拖动而不是单个元素

【英文标题】：JQuery UI Sortable + Laravel Collection Chunk: Rows draggable instead of single elements

【发布时间】：2017-08-07 13:40:28

【问题描述】：

我有一个问题。当我使用 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"  class="center-block img-responsive">
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endforeach
</div>

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

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

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

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

【问题讨论】：

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

【参考方案1】：

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

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