在 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.