jQuery UI 可拖动元素始终位于顶部

Question

我需要从左侧区域拖动的元素始终位于顶部。当我第一次从左侧区域拖动它们时，它们是这样的，但是如果我将它们放入框 2，然后决定拖动到框 1，我拖动的项目会出现在框 1 下方。

感到困惑吗？这是我正在谈论的内容的DEMO。

是的，我添加了 zIndex ——没有帮助。

Answer 1

看起来您正在做一些编辑。 :)

解决方案是将两个框设置为相同的 z-index，然后使用“start”事件降低同级框（卡片未覆盖的框）的 z-index。 “停止”事件应该使它们再次相等。当然，可拖动本身需要更高的 z-index。

您还可以尝试堆栈选项。

编辑：工作示例。 请注意，它实际上是可拖动的 drop< /code> 需要再次将 z 索引设置为相等的事件。

需要进行这些更改（当然，省略代码中的星号）：

您 dragdrop-client.js

// make the new card draggable
    newCard.draggable({
        zIndex: 2500,
        handle: ".card",
        stack: ".card",
        revert: "invalid",
        start: function() {
            $(this).effect("highlight", {}, 1000);
            $(this).css( "cursor","move" );
                **var $par = $(this).parents('.stack');
                if ($par.length == 1) {
                    console.log('in stack');
                    $par.siblings().css('z-index', '400');
                }**
        },
        stop: function() {
            $(this).css("cursor","default");
                $(".stack").css('z-index', '500');
        }
    });

// make the new stack droppable
    newStack.droppable({
        tolerance: "intersect",
        accept: ".card",
        greedy: true,
        drop: function(event, ui) {
            **$(".stack").css('z-index', '500');**
            card = ui.draggable;
            putCardIntoStack(card,stackId);
        }
    }); 

在 dragdrop-client.css 中

.stack {
    width: 300px;
    border: 1px dashed #ccc;
    background-color: #f5f5f5;
    margin: 10px;
    float:left;
    **z-index:500;**
}

Answer 2

当动态插入元素时，我会执行two7s_clash 建议的拖放操作。我们在画布上插入了一些元素，然后我们想要将其拖放到所有内容上：

start: function(e) { $('element').css('z-index', -1)}
stop:  function(e) { $('element').css('z-index', 0)}