11

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

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

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

   helper: 'clone',
   appendTo: "body"

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

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

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

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

4

3 回答 3

9

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

工作示例

首先修复您的 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 文档：

Stack
控制与选择器匹配的元素集的 z-index，总是将当前拖动的项目放在前面。

于 2013-08-01T03:05:41.593 回答
0

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

function setupDraggableFields($elements) {
    $elements.draggable({
        helper: "clone",
        handle: ".field-sort-handle",
        appendTo: ".section-container"
    });
}
于 2022-02-07T19:21:34.637 回答
0

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

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

于 2016-08-01T10:37:01.480 回答