jquery ui draggable element出现在其他元素后面？

Question

我正在使用jquery ui draggable,并最终可以放置以便将图片重新排序到不同的盒子中.

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

谷歌搜索时,我能够找到添加:

   helper: 'clone',
   appendTo: "body"

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

有没有办法让我在拖动时让元素保持在一切的顶部？我尝试过高z-index无济于事.

这是一个jsfiddle,它显示了第二个背后的第一个draggle元素.反过来说这不是问题.我不能在不破坏很多其他事情的情况下更改包含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>

下一步您可能想要使用堆栈选项:

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

$('.draggableContainer').droppable()

从API文档:

堆栈
控制与选择器匹配的元素集的z-index,始终将当前拖动的项目置于前面.