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

Question

我需要将从左侧区域拖动的元素始终放在顶部.它们是我第一次从左侧区域拖动它们,但是如果我将它们放入Box 2然后决定拖动到Box 1,我拖动的项目将显示在Box 1下方.

困惑？这里的DEMO什么我谈论的.

是的,我添加了zIndex - 没有帮助.

Answer 1

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

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

您也可以尝试堆栈选项.

编辑:工作示例. 请注意,它实际上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;**
}