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

Posted

技术标签:

【中文标题】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() 我找不到一个很好的解决方案来使单个元素可拖动。

【问题讨论】:

好像是自己想出来的。有一个项目选项默认为:&gt; *。通过设置:items: '&gt; .row &gt; *',我现在可以抓取单个元素 【参考方案1】:

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

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

【讨论】:

以上是关于JQuery UI Sortable + Laravel Collection Chunk:行可拖动而不是单个元素的主要内容,如果未能解决你的问题,请参考以下文章

JQuery-UI-sortable基础使用和详参

jQuery UI:sortable('toArray') 返回一个空数组

jquery ui的sortable拖动克隆问题

jquery-ui-sortable,当列表被隐藏时如何防止取消?

05 Jquery UI Sortable ????????????

jquery sortable的拖动方法示例详解1