jQuery Droppables - 隐藏“非活动”时出现问题降落区

Question

我有一个相当长的 div 列表，我试图将其用作 droppable，但我想隐藏所有不接受当前可拖动元素的 droppable。

我在 http://jsfiddle.net/N3uh3/ 上举了一个例子

基本上，如果我拖动 '拖动 A' 元素，它将隐藏所有“可放置 B”元素，并允许我放置到正确的元素上，这效果很好。

但是，如果我拖动“拖动 B”元素，它将隐藏所有“可放置 A”元素，但其余放置区域不接受我的可拖动项目。如果我将该项目放置在“可放置 B”元素的原始位置，那么它会正确放置（即使该元素的位置已移动）。如果我使用“可见性：隐藏；”而不是“display:none”，这也可以工作，因为元素不移动。

我希望这是有道理的 - 似乎可放置区域设置为元素的原始位置......有什么办法解决这个问题吗？

.lhs { width: 40%; float:left; }
.rhs { width: 40%; float:right; }
.lhs div { margin: 4px; }
.a { background-color: green; }
.b { background-color: red; }
.ui-state-highlight { background-color: yellow; }
.dropZones .ui-droppable { display: none; }
.dropZones .ui-state-highlight { display: block; }
.currentDropZone { display: block; }

<div class="wrapper">
    <div class="lhs">
        <div class="a">DROP A</div>
        <div class="a">DROP A</div>
        <div class="a">DROP A</div>
        <div class="a">DROP A</div>
        <div class="a">DROP A</div>
        <div class="a">DROP A</div>
        <div class="b">DROP B</div>
        <div class="b">DROP B</div>
        <div class="b">DROP B</div>
        <div class="b">DROP B</div>
        <div class="b">DROP B</div>
        <div class="b">DROP B</div>
    </div>
    <div class="rhs">
        <div class="a">Drag A</div>
        <br />
        <div class="b">Drag B</div>
    </div>
</div>


$(document).ready(function(){
    $('.rhs div').draggable({
        helper: function (e,ui) {
            // this sets the clone to be a child of the body - fixing overflow:auto problems on divs!
            return $(this).clone().appendTo('body').css('zIndex',5).show();
        }, 
        revert: 'invalid',
        cursor: 'move',
        start: function(){
            //$('.lhs').addClass('dropZones');    // immediately hides so doesn't get the ui-state-highlight class'

            // give a quick period of time then add the class
            setTimeout(function() { $('.lhs').addClass('dropZones'); }, 250);
        },
        stop: function(){
            $('.lhs').removeClass('dropZones');
        },
    });

    $('.lhs div').each(function(){
        $(this).droppable({
            greedy: true,
            activeClass: 'ui-state-highlight',
            accept: '.' + $(this).attr('class'),
            drop: function(event, ui) {
                $(this).append($(ui.draggable).clone());
            },
            activate: function(){
                $(this).addClass('currentDropZone');
            },
            deactivate: function(){
                $(this).removeClass('currentDropZone');
            }

        });
    });
});

提前致谢！

Answer 1

问题在于，隐藏不活动的 droppable 会改变元素流和活动 droppable 的位置。当您的延迟事件触发时，绝对可放置位置已被 jQuery UI 缓存，这就是您松开鼠标按钮时所检查的内容。在原始示例中，如果将 B 拖动到 B 放置区的旧位置（位于可见列表下方），您仍然可以放置 B。

一个快速简单的解决方案是告诉 jQuery UI 通过在可拖动对象上使用 refreshPositions: true 选项来重新计算每次鼠标移动时的可放置​​位置。来自文档：

刷新位置：布尔值

如果设置为 true，则所有内容均可删除
位置是在每个
鼠标移动。注意：这可以解决问题
在高度动态的页面上，但是
显着降低性能。

您更新了演示： http://jsfiddle.net/N3uh3/1/

这是一个快速修复，但我的建议是在隐藏项目时编写自己的逻辑，而不是依赖 setTimeout()，这会在隐藏您的 droppables 之前增加明显烦人的延迟。

由于只有显示的 droppables 被激活，我会在 jQuery UI 之前添加隐藏逻辑，甚至有机会构建接受 droppables 的列表，例如项目上的 mousedown 事件。然后，您可以编写自己的自定义代码来隐藏不需要的可放置项，因此当涉及到缓存位置时，它们将是正确的，并且无需在每次鼠标移动时刷新缓存，这可能是一项昂贵的操作，具体取决于可放置对象的数量你拥有的可掉落物品。