与容器相关的jQuery可拖动+可排序问题

问题描述

我需要有一个简单的元素列表，可以将其拖到可排序的div中。非常简单的事情。但是我的包含可排序元素的div是Position：Relative，并且需要保持原样。这会产生一个您可以在此处看到的问题：http://jsfiddle.net/yynqweuj/1/

<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable" style="position:relative;">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

如果您开始拖动"Drag Me Down"元素，则会出现一个红色方块作为帮助器，并位于光标的中心；如果您将该元素输入到可排序区域中，则仍然可以，但当您离开可排序区域时，红色方块会移动。这是因为容器是位置相对的，也是因为JQuery UI的更新(我想)。

我尝试了较旧的版本，如1.10.2，没有问题，因为帮助器总是附加到正文中，但现在最新的稳定版本1.11.2它附加到正文中，但当您进入可排序区域时，它会附加到可排序列表中...并且它处于相对位置，计算位置的数学方法是错误的...

有什么想法吗？

谢谢！

推荐答案

在我的例子中，我将元素放在Bootstrap.ol-ms-x中。修复方法是添加appendTo和clone选项，如下所示：

$('#sortable').sortable({
    helper: 'clone',
    appendTo: document.body,
});

这篇关于与容器相关的jQuery可拖动+可排序问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！