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

Question

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

使困惑？这是DEMO我在说什么。

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

Answer 1

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

解决方案是将两个框设置为相同的 z-index，然后使用“开始”事件降低兄弟(卡片未结束的框)的 z-index。 “停止”事件应该再次将它们设置为相等。当然，可拖动本身需要更高的 z-index。

您也可以试试 stack option .

编辑:Working example.请注意，它实际上是可拖动的 drop需要再次设置 z-index 相等的事件。

您需要进行这些更改(当然，在代码中省略星号):

在 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;**
}