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

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 的 sort 事件处理程序中的 document.elementFromPoint(e.clientX, e.clientY) 来模仿 droppable 行为。我在.ui-sortable-helper 上设置了pointer-events: none，以便能够查看当前拖动的项目，如果dom 元素是一个组，我会对其进行操作。

这是一个更新的小提琴：http://jsfiddle.net/illuminaut/vtxfsgv2/4/

但是，我不确定这种方法有多强大，而且我认为这甚至不适用于触摸。我可能会更好地使用实际的 droppable，所以我将这个问题保持开放。此外，当另一个组被移动时，组的可排序仍然没有排序。

Answer 1

sortable 和 droppable 的组合最终确实奏效了，但是在拖动图标后将组项目保持在适当的位置是很棘手的。我最终在 sort 事件期间动态更新了 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();

小提琴：http://jsfiddle.net/illuminaut/govfr3xc/