jQuery Droppables - 隐藏 'inactive' 拖放区时出现问题

Question

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

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

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

但是，如果我拖动“Drag B”元素，它将隐藏所有“Droppable A”元素，但剩余的放置区域不接受我的可拖动元素。如果我将元素放置在“可放置 B”元素的原始位置，那么它会正确放置(即使元素的位置已移动)。如果我使用“可见性:隐藏；”而不是“显示:无”这也适用于元素不移动。

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

.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

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

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

refreshPositions: Boolean

If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

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

这是一个快速修复，但我的建议是在隐藏元素时自行制定逻辑，而不是依赖 setTimeout()，这会在隐藏可放置元素之前增加明显的恼人滞后。

因为只有显示的 droppables 被激活，我会在 jQuery UI 甚至有机会建立一个接受 droppables 的列表之前添加我的隐藏逻辑，比如元素上的 mousedown 事件。然后你可以做你自己的自定义代码来隐藏不需要的 droppables，所以当涉及到缓存位置时，它们是正确的并且不需要在每次鼠标移动时刷新缓存，这可能是一个昂贵的操作，具体取决于你拥有的可掉落物。