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

Question

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

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

在谷歌搜索时我发现添加：

   helper: 'clone',
   appendTo: "body"

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

有没有办法让元素在被拖动时保持在所有元素之上？我尝试过高 z-index 但无济于事。

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

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

Answer 1

我发现您的代码存在一些问题，我想我已经解决了它们并使其正常工作。

工作示例

首先修复你的 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 选项：

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

$('.draggableContainer').droppable()

来自 API 文档：

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

Answer 2

虽然在启动可拖动时有一个选项 - 'stack' 存在，但它无法正常工作，所以我编写了一个使用 z-index 的小型库 DragToFront。以下是 plunkr 链接

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

Answer 3

Stack 也不适合我。我能够通过使用

appendTo

属性来纠正 z 索引问题。

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

Answer 4

无论其价值如何，您还可以使用

helper:

中的函数。

例如：

helper: function() {
    var dragEl = $("<div></div>").append($(this).data('name'));
    return dragEl
},

用这个你可以设置新的 z 值。