Question

我有一个包含图标和组（文件夹）的网格。我希望图标和组都可以排序，但是由于团队不会移开的限制，但保持原位并基本上变成图标的静止下降目标。在更大的可排序范围内移动一个组仍然是可能的，这次其他组应该像sortables一样移动并移开。

[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行为。我在pointer-events: none上设置了.ui-sortable-helper，以便能够查看当前拖动的项目，如果dom元素是一个组，我会对其进行操作。

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

然而，我不确定这种方法有多强大，我不认为这甚至适用于触控。我可能最好使用一个实际的可放置，所以我打开这个问题。此外，当移动另一个组时，组的可排序仍然没有排序。

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();

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

如何在其上移动其他可排序项目时使可排序行为类似于droppable

1 个答案: