当将其他可排序项移动到可排序项上时，如何使可排序项表现得像可拖放项

How to make a sortable behave like a droppable when moving other sortable items over it

本文关键字：排序 何使可 拖放 其他 移动      更新时间：2023-09-26

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

[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/

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

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

然而，我不确定这种方法有多强大，我认为这甚至不适用于触摸。我可能会更好地使用一个真正的掉落物，所以我留下这个问题。此外，当另一个组被移动时，组的可排序表仍然不排序。

可排序和可拖放的组合最终确实有效，但是在拖动图标时保持组项的位置是很棘手的。我最终在排序事件期间动态地更新了排序表的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/

相关文章：