在 jQuery 拖放中过滤放置区域

Question

我有一个可拖动元素 (.item) 和放置区域 (.droparea) 的列表。

<div class="sortable">
    <div class="droparea" id="div0">Drop area 0</div>
    <div class="item" id="item1">Item 1</div>
    <div class="droparea" id="div1">Drop area 1</div>
    <div class="item" id="item2">Item 2</div>
    <div class="droparea" id="div2">Drop area 2</div>
    <div class="item" id="item3">Item 3</div>
    <div class="droparea" id="div3">Drop area 3</div>
</div>

我的目标是允许将元素放置在放置区域中，不包括其周围区域（例如，#item1 可以放置在 #div2 和 #div3 中，但不能放置在 #div0 和 #div1 中） .

我尝试使用draggable revert 选项拒绝丢弃。每次发生放置时，我都会将当前放置区域与拖动元素周围的放置区域（开始拖动时存储）进行比较。如果发生匹配，则丢弃丢弃，否则将被接受。

revert: function(valid)
{
    if(valid) 
    {
        // compare dropping area with forbidden areas
        if(dropped==prevDrop || dropped==nextDrop)
        {
            console.log('invalid drop');
            return true;
        }
        else
        {
            console.log('valid drop ' + dropped.attr('id'));
            return false;
        }
    }
    else
    {
        return true;
    }
}

Fiddle

很遗憾，它不起作用：总是接受掉落。有什么想法吗？

Answer 1

您已经完成了一项伟大的工作，并且需要进行微小的更改才能实际使此代码正常工作，

只需将revert中的比较方法改为,

if(dropped.prop("id")==prevDrop.prop("id") || dropped.prop("id")==nextDrop.prop("id"))

您在这里使用了对象比较，但是当我将 Item1 放到 div0 时，这些值的结果，

console.log(dropped);
console.log(prevDrop);
console.log(nextDrop);

看起来，

似乎在droppable 中使用dropped = $(this); 结果添加了context: div#div0.droparea.ui-droppable，这与draggable 不同。因此导致了比较的问题。

这里是working fiddle。