jQueryUI - 拖放问题 - 拖动的元素落后于其他 DOM 元素答案

【问题标题】：jQueryUI - Drag and Drop issue - dragged element goes behind other DOM elementsjQueryUI - 拖放问题 - 拖动的元素落后于其他 DOM 元素
【发布时间】：2013-07-31 08:35:38
【问题描述】：

我正在尝试在 2 个 Div 之间实现拖放

请参考我下面的小提琴： http://jsfiddle.net/sandeepkram/SAUCa/

此布局是我的应用程序的复制品。在小提琴中，您可以看到，如果您在第一个 div（左侧）内拖动一个元素，它会永远在该 div 内移动 - 尽管如果您只是移动鼠标将其拖放到右侧 div 上，它实际上确实如此工作。

这里的问题是左侧 div 中元素的无限滚动/拖动。我不知道这里有什么问题 -

在我的应用程序中，我遇到了另一个问题，当我将一个项目拖出左侧 div 时，它消失了，尽管我可以将光标放在右侧 div 上，并且拖放似乎工作正常。

需要帮助了解拖动元素消失的原因。

我已经在 stackoverflow 和网络上查找了所有与此相关的问题和资源、可排序文件等 - 但没有用。

我也尝试过使用“堆栈”选项但没有用

$.each($("ul#secondaryKPIList ul > li"), function (index, tListItem) {
        $(tListItem).addClass("SecondaryKPIDraggable");
        $(tListItem).draggable({
        revert : 'invalid',
        stack: '.SecondaryKPIDraggable'
        });
    });

【问题讨论】：

标签： javascript jquery-ui drag-and-drop

【解决方案1】：

要解决视觉问题，您可以删除溢出更改

overflow-y: auto;
overflow-x: hidden;

在 .KpisListItems 上将其设置为以下小提琴：http://jsfiddle.net/GEWLs/2

这些规则弄乱了 jQuery sortable 处理和计算定位的方式，因此出现了奇怪的行为。

【讨论】：

谢谢 :) 这有助于解决小提琴和我的应用程序中的问题。

【解决方案2】：

我知道我有点晚了，但这是另一个我觉得更简单的解决方案，只需添加以下 css：

.ui-draggable { z-index:9999; }

9999 可能有点矫枉过正。

【讨论】：

【解决方案3】：

我的猜测是因为您使用的是“列表”标记。如果您尝试使用“divs”代替您的可拖动项目，我敢打赌它会正常工作。

【讨论】：

好的，我会试一试，但是由于代码中其他地方的特定要求/依赖关系，使用了列表项。我可以通过任何方式使其与当前布局一起使用。