jQuery UI可拖拽元素出现在其他元素后面？

Question

我正在使用jQuery UI的draggable功能，以及droppable功能，使得可以将图片重新排序到不同的盒子中。

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

在Google搜索时，我发现可以添加以下内容：

   helper: 'clone',
   appendTo: "body"

这样做可以使被拖动的元素显示在所有元素的顶部，但它仍然留下了原始复制品在方框里，而我不想要那个。

有没有办法让元素在拖动时保持在所有东西的顶部？我已经尝试了高z-index，但无济于事。

这里是一个 jsfiddle，它显示第一个可拖动元素在第二个元素后面。反过来则没有问题。 我不能改变包含div的相对位置而不破坏很多其他东西。

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

- Kyle

---

你能否包含一个 jsFiddle？ - bobthyasian

@bobthyasian http://jsfiddle.net/cBWhX/6/ - Kyle

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文档：

Stack
控制与选择器匹配的元素的z-index，始终将当前拖动的项目置于前端。

- apaul

Answer 2

栈对我也不起作用。我能通过使用appendTo属性来解决z-index问题。

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

- J_sdev

Answer 3

虽然在初始化可拖动元素时存在一个选项 - 'stack'，但它并不能正常工作，因此我编写了一个小型库 dragToFront 来处理 z-index。以下是 plunkr 链接：

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

- Sandeep Gantait