元素位置和鼠标在 jQuery 可排序和 Bootstrap 上的奇怪行为

Question

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

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

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

关于此的更多信息我在 LI 元素中使用 bootstrap 面板，标记是这样的

<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());
    }

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

这是一个有效的 fiddle 重现该行为 https://jsfiddle.net/3jj6k7bm/

非常感谢任何帮助，谢谢

Answer 1

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

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

元素位置和鼠标在 jQuery 可排序和 Bootstrap 上的奇怪行为

Strange behavior with element position and mouse on jQuery sortable and Bootstrap

css

jquery

jquery-ui

jquery-ui-sortable

twitter-bootstrap