javascript - 当将其他可排序项目移到其上时，如何使可排序行为像可放置项

Question

我有一个包含图标和组(文件夹)的网格。我希望图标和组都可以排序，但要限制组不会移开，而是留在原地，基本上变成图标的固定放置目标。在较大的 sortable 中移动一个组应该仍然是可能的，这次其他组应该像 sortable 一样移动并让开。

[Group 1] [Group 2] [Icon  1] [Icon  2]
[Group 3] [Icon  3] [Icon  4]

我已经部分实现了预期的结果，方法是使所有组成为一个可排序的一部分，所有图标成为另一个可排序的一部分，将它们都包含在同一个父容器中，并将可排序的组与可排序的图标连接起来，但不是另一种方式周围。

这允许我在拖动图标时保持组图标静态，同时图标仍在排序。到目前为止一切顺利，但我找不到将这些组变成图标的放置目标的方法。将图标拖到一个组上时，我想显示一个悬停类并捕获图标在哪个组上。我已经尝试使这些组成为可放置的，但它不响应可排序的，如果我尝试使图标成为可拖动的，那么它会覆盖所有可排序的行为。

我的代码的另一个问题是组可以移动图标，但其他组不能。我需要的是当图标四处移动时保持静止的组，但如果另一个组被拖动则在可排序中四处移动。

请注意，我并不真的需要一个嵌套的可排序对象，因为我想要的只是将图标放在一个组上，而不需要将它们实际添加到那里。

<div class='container'>
    <div class='groups'>
        <div class='item group'>Group 1</div>
        <div class='item group'>Group 2</div>
        <div class='item icon'>Icon 1</div>
        <div class='item icon'>Icon 2</div>
        <div class='item group'>Group 3</div>
        <div class='item icon'>Icon 3</div>
        <div class='item icon'>Icon 4</div>
    </div>
</div>


$('.icons').sortable({
    items: '.icon',
    containment: '.container'  
}).disableSelection();
$('.groups').sortable({
    items: '.group',
    connectWith: '.container',
    containment: '.container'
}).disableSelection();

jsfiddle:http://jsfiddle.net/illuminaut/vtxfsgv2/

更新:我能够通过查看包含 sortable 的排序事件处理程序中的 document.elementFromPoint(e.clientX, e.clientY) 来模仿 droppable 行为图标。我在 .ui-sortable-helper 上设置了 pointer-events: none 以便能够在当前拖动的项目下查看，如果 dom 元素是一个组，我将对其进行操作.

这是一个更新的 fiddle :http://jsfiddle.net/illuminaut/vtxfsgv2/4/

但是，我不确定这种方法有多稳健，而且我认为它甚至不适用于触摸。我可能最好使用实际的 droppable，所以我将这个问题悬而未决。此外，当移动另一个组时，组的可排序仍然没有排序。

Answer 1

sortable 和 droppable 的组合最终确实奏效了，但是在拖动图标后将组项目保持在原位是很棘手的。我最终在排序事件期间即时更新了 sortable 的 items 属性，但结果有点古怪:它在大多数时间都有效，但有点不可预测。

$('.container').sortable({
    items: '.item',
    containment: '.container',
    cursor: 'move',
    placeholder: 'placeholder',
    start: function(e,ui) {
        $('.group').each(function(i) {
            var index = $(this).index('.item');
            $(this).data('pos',index);
        })
    },
    sort: function(e,ui) {
        var $sortable = $(this);
        var index = ui.placeholder.index();
        $('.group').each(function(i,el) {
            if ($(el).data('pos') == index) {
                $sortable.sortable('option','items','.icon');
                $sortable.sortable('refresh');
            }
        });
    },
    stop: function(e,ui) {
        $(this).sortable("option","items",".item");
    }
}).disableSelection();
$('.group').droppable({
    accept: '.placeholder,.icon',
    hoverClass: 'hover-target',
    drop: function(e,ui) {
        $(this).append('<p>'+ui.draggable.text()+'</p>');
        ui.draggable.remove();
    }
}).disableSelection();

fiddle :http://jsfiddle.net/illuminaut/govfr3xc/