Question

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

困惑？这是我所谈论的DEMO。

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

Answer 1

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

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

您也可以尝试stack option。

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

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

在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)}

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

2 个答案: