jQuery sortable 和 Bootstrap 上元素位置和鼠标的奇怪行为答案

【问题标题】：Strange behavior with element position and mouse on jQuery sortable and BootstrapjQuery sortable 和 Bootstrap 上元素位置和鼠标的奇怪行为
【发布时间】：2017-05-29 10:20:45
【问题描述】：

我一直在寻找这个问题的答案，但还没有找到。

我有一个带有 bootstrap 和 jQuery 可排序的系统，问题是当我将一个元素从一个列表移动到另一个列表时，元素就像移动的速度比鼠标光标慢，就像在光标和元素之间获得间隙，并且当我到达另一个列表时，当鼠标靠近但不在占位符的确切位置时出现占位符，并且元素落后几个像素

我制作了一个带有快速示例的视频以供查看 https://youtu.be/MhxAhIDUj3Y

更多信息我在 LI 元素内使用引导面板，标记是这样的

<li class="ui-sortable-handle" style="display: list-item;">    
    <div class="panel panel-default span4">
    </div>
</li>

我在 sortable 上使用的选项是这样的

    placeholder: 'ui-sortable-placeholder',
    connectWith: ".connectedSortable",
    helper: 'clone',
    scroll: false,
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }

你知道光标和元素之间出现这种奇怪的鼠标间隙是怎么回事吗？

这是一个重现行为的工作小提琴 https://jsfiddle.net/3jj6k7bm/

任何帮助将不胜感激，谢谢

【问题讨论】：

您能否提供重现此内容所需的所有相关代码？如果你能做一个工作演示，那就太好了。
这是你用的吗？ jqueryui.com/sortable
是的，我使用 jquery 可排序，这里是一个与示例 jsfiddle.net/3jj6k7bm 相关的工作小提琴

标签： jquery css twitter-bootstrap jquery-ui jquery-ui-sortable

【解决方案1】：

这是因为将<body> 上的zoom 设置为80%。该元素实际上与光标移动一样多，但由于<body> 被缩小，它似乎移动得更少。为了进一步证明这一点，我对body{zoom: 180%;} 做了另一个小提琴：https://jsfiddle.net/3jj6k7bm/2/ 你会看到相反的情况：元素似乎比光标移动得更快。

将缩放更改为 100%，它应该是固定的。

【讨论】：

非常感谢Emilio，您的建议解决了我的问题！但现在我在想，为什么我不能使用身体上的缩放，也许这是排序的错误？或使用可排序时无法设置的设计
@Juanchi 我认为问题在于所有涉及“可拖动”行为的 jQuery UI 函数，包括 .draggable() 本身，都基于元素的位置，同时拖动光标移动了多少相对于起始位置，而不是实际上在它的当前位置上。这很难解释，但如果你想到它，它还是有道理的
无论如何，here's 是一个很好的转折点，让.draggable() 功能无论当前缩放如何都能正常工作，你也可以让它与.sortable() 一起工作