在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中1}}和#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);

看起来，

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

这是working fiddle。