Question

我正在使用jquery ui draggable，最终可以将图片重新排列到不同的盒子中。

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

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

   helper: 'clone',
   appendTo: "body"

这样就可以让被拖动的内容出现在所有元素的顶部，但它会将原始副本留在框中，我不希望这样。

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

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

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

Answer 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，始终将当前拖动的项目放在前面。

Answer 2

虽然有一个选项 - ＆＃39; 堆叠＆＃39;在启动draggables时存在，但它不能正常工作，所以我写了一个小型库dragToFront与z-index一起玩。以下是plunkr链接

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

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

2 个答案: