jQuery UI droppable 问题答案

【问题标题】：jQuery UI droppable questionjQuery UI droppable 问题
【发布时间】：2011-05-13 04:38:40
【问题描述】：

我正处于准备好我的应用程序的最后阶段，并且卡在了几个项目上。

当一个项目从左列拖到主区域时，它需要创建一个新的组框，它可以。但是，如果我将另一个项目拖到这个新创建的盒子中，而不是留在那里，它会创建另一个新盒子......
我将项目拖到预定义的框中。然后我决定通过将一个项目从预定义框拖到黄色区域来创建一个新框。它没有，而是飘回盒子里。它必须能够创建一个新框，无论它是从左列拖动还是从主区域中的任何其他框拖动。

希望有一双新鲜的眼睛看看它，让我知道我在这里缺少什么。

【问题讨论】：

无法访问您的测试页。它受密码保护。
您可以在初次调用createStack 之前尝试调用$("#dropZone").droppable({ 吗？我很好奇静态和动态之间的区别是否是 droppable 在创建新的时已经被调用。此外，您是否尝试过使用creator = true 调用动态添加的那些只是为了消除这个问题？
很抱歉，测试了其他东西并启用了密码。现在应该清除了。

【解决方案1】：

如果将newStack droppable 的greedy 选项设置为true，第一个问题就解决了。这可以防止 drop 事件传播到其他容器 droppable，例如，在您的情况下，#dropZone 正在创建一个新堆栈：

newStack.droppable({
    tolerance: "intersect",
    accept: ".card",
--> greedy: true,  <--
    drop: function(event, ui) {
            card = ui.draggable;
            putCardIntoStack(card,stackId);
    }
});

如果将#dropZone droppable 的accept 选项更改为.card，第二个问题就解决了。这是因为堆栈上的卡片具有类名stackcard，这肯定会使函数返回false：

$("#dropZone").droppable({
    /*accept: '.card', function(dropElem) {
                return (!dropElem.hasClass("stackcard"));
    },*/
--> accept: '.card' <--
    ...

【讨论】：

太棒了！非常感谢！
@santa，createEmptyStack 服务器代码有问题。它总是返回一个空字符串作为 id。
哦，你很好。是的，我今天添加了一些代码，这些代码阻碍了我的一些旧代码正确创建组。我删除了它，现在我可以创建多个框，但由于某种原因，我无法将项目从一个块移动到另一个块。伙计，这永远不会停止......
我想我明白了！同一问题的一部分——我使用的是创建者 ID。不是说它是固定的，我如何让我的可拖动项目始终位于顶部？我什至尝试添加 z-index:9999，但堆栈似乎总是在上面......很奇怪。