jquery ui 可拖动元素出现在其他元素后面？答案

【问题标题】：jquery ui draggable element appears behind other elements?jquery ui 可拖动元素出现在其他元素后面？
【发布时间】：2013-08-01 09:59:43
【问题描述】：

我正在使用 jquery ui 可拖动，最终可放置，以便将图片重新排序到不同的框中。

当我将图片拖出框时，一旦它离开其直接容器，它就会出现在所有其他元素的下方。

在谷歌搜索时，我能够找到添加：

   helper: 'clone',
   appendTo: "body"

这使得被拖动的内容显示在所有元素的顶部，但它仍将原始副本留在框中，我不希望这样。

有没有一种方法可以让元素在被拖动时保持在所有内容之上？我尝试了高 z-index 无济于事。

这是一个 jsfiddle，它显示了第二个后面的第一个拖动元素。反过来，这不是问题。我无法在不破坏很多其他东西的情况下更改包含 div 的相对位置。

http://jsfiddle.net/cBWhX/6/

【问题讨论】：

你能包含一个 jsFiddle 吗？
@bobthyasian jsfiddle.net/cBWhX/6

标签： jquery-ui drag-and-drop draggable jquery-draggable

【解决方案1】：

我发现你的代码有一些问题，我想我已经解决了这些问题并让它正常工作。

Working Example

首先修复您的 HTML：

<div id="container1" style="background-color:red;padding:20px">
    <div class="draggableContainer">
        <div class="draggable" style="background-color:blue;width:200px;height:200px;"></div>
    </div>
    <div class="draggableContainer">
        <div class="draggable" style="background-color:yellow;width:200px;height:200px;"></div>
    </div>
    <div class="draggableContainer"></div>
</div>

接下来您可能想要使用stack option：

$('.draggable').draggable({
    revert: "invalid",
    snap: ".draggableContainer",
    stack: ".draggable"
});

$('.draggableContainer').droppable()

来自API documentation：

堆栈
控制与选择器匹配的元素集的 z-index，始终将当前拖动的项目放在前面。

【讨论】：

.stack 是我需要的。谢谢！

【解决方案2】：

虽然有一个选项 - 'stack' 在启动可拖动项时存在，但它不能正常工作，所以我写了一个小库 dragToFront 玩 z-index。以下是plunkr链接

https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/

【讨论】：

【解决方案3】：

Stack 也不适合我。我能够通过使用 appendTo 属性来纠正 z-index 问题。

function setupDraggableFields($elements) {
    $elements.draggable({
        helper: "clone",
        handle: ".field-sort-handle",
        appendTo: ".section-container"
    });
}

【讨论】：