jquery - jQuery Sortable 的奇怪行为 : Box not staying in the same place when dragging

Question

我正在构建的仪表板上实现 jQuery 可排序，以便用户可以自定义其仪表板 View 。

单击 handle 时，仪表板左侧和中心的元素会正常运行。然而，当我尝试拖动最右侧的元素时，它们表现出奇怪的行为。我仍然可以将它们拖放到网格周围，但鼠标不再停留在 handle 上......盒子在屏幕上跳跃。

这是怎么回事？为什么它只发生在边缘框上，有没有办法解决这个问题？

Here's the live dashboard. View the source to see the code.

这是正确行为的屏幕截图。鼠标位于移动符号旁边的框角上:

这是奇怪行为的屏幕截图。鼠标实际上是在空白的灰色区域，但是模块已经跳到了浏览器的左下角:

Answer 1

这与浏览器对百分比值的计算有关。

您正尝试在各个组件中使用 100% 的浏览器宽度。例如，如果浏览器尝试计算 23% 的浏览器宽度是四倍，然后计算 1% 的边距是 8 倍(加起来达到预期的 100%)，则不能保证这些总和舍入后组件不会超过浏览器窗口的实际宽度。某些总宽度有效，而其他总宽度则无效。

让我们用一些数学来分解这个问题。如果我们将宽度限制为 503px，我们可以进行如下计算，并发现我们超出了最大宽度。

503px * 0.23 width = 115.69 ≈ 116px

503px * 0.01 margin = 5.03 ≈ 5px

(4 boxes * 116px per box) + (4 boxes * 2 margins * 5px per margin) = 464px + 40px = 504px

<强> DEMO (Incorrect Behavior) - 最大宽度设置为 503px

但是，如果我们将宽度限制为 500px，计算结果恰好符合我们的预期。

500px * 0.23 width = 115px

500px * 0.01 margin = 5px

(4 boxes * 115px per box) + (4 boxes * 2 margins * 5px per margin) = 460px + 40px = 500px

<强> DEMO (Correct Behavior) - 最大宽度设置为 500px

这只发生在页面右边缘的项目上，因为那是发生换行的地方。当没有足够的可用水平空间时，设置为 float: left 的项目将换行。这就是为什么该项目实际上会转到下一行的第一个位置。

考虑到初始状态不受影响，实际问题似乎是由 jQuery UI 在排序期间执行的额外计算和 DOM 操作触发的。