jQuery UI Droppable 只接受某些类别的 drop

Question

我有 3 个 div 元素，全部带有 abs 类，其中只有一个元素具有额外的 outside 类，如下所示。所有元素都是可拖动和可放置的(使用 jquery ui)。

问题是我不希望将 outside 类的 div 放入其他 abs div 中或接受任何 absdiv被投入其中。我只希望能够将 abs 放入其他 abs 中，而其中任何一个都不存在 outside 。我尝试了以下操作，但仍然可以将 outside div 拖动到其他 abs div 中。我不要那个。您能帮助指导我采取正确的方法来防止这种情况发生吗？

检查 jsfiddle http://jsfiddle.net/PWh2L/

<div class="abs"></div>
<div class="abs outside"></div>
<div class="abs"></div>

$('.abs').draggable();
$('.abs:not(.outside)').droppable({
    accept: '.abs',
    hoverClass: "drop-hover",
    tolerance: "pointer",
    greedy: true
})

Answer 1

我认为您只需将 '.abs:not(.outside)' 放入接受选项中，如下所示:

<强> Working Example

$('.abs').draggable();
$('.abs:not(.outside)').droppable({
    accept: '.abs:not(.outside)', // Important bit
    hoverClass: "drop-hover",
    tolerance: "pointer",
    greedy: true,
    drop: function () {
        alert('drop');
    }
});

或者也许这更符合您的需求:

<强> Working Example 2

$('.abs').draggable();
$('.abs').droppable({ // Change here
    accept: '.abs:not(.outside)', // and here
    hoverClass: "drop-hover",
    tolerance: "pointer",
    greedy: true,
    drop: function () {
        alert('drop');
    }
});