使用jQuery Sortable的奇怪行为：在拖动时Box不会停留在同一个地方

Question

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

单击手柄时，仪表板左侧和中间的元素表现正常。然而，当我尝试拖动它们时，最右边的元素显示出奇怪的行为。我仍然可以将它们拖放到网格周围，但鼠标没有留在手柄上......盒子在屏幕上跳跃。

这里发生了什么？为什么它只发生在边框上，有没有办法解决这个问题？

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

以下是正确行为的屏幕截图。鼠标位于框的一角，移动符号为：

这是奇怪行为的屏幕截图。鼠标实际上位于空的灰色空间中，但模块已跳转到浏览器的左下角：

Answer 1

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

您试图在各种组件中使用完全100％的浏览器宽度。例如，如果浏览器尝试计算浏览器宽度的23％是四倍，然后计算1％的保证金是8倍（加起来达到预期的100％），则无法保证这些总和的总和四舍五入后，组件不会超过浏览器窗口的实际宽度。某些总宽度可以使用，而有些则不会。

让我们用一些数学来打破这个。如果我们将宽度限制在503px的宽度，我们可以按如下方式进行计算，看看我们的宽度超过最大宽度。

  

503px * 0.23 宽度 =115.69≈116px

     

503px * 0.01 margin =5.03≈5px

     

（4个盒子 * 116px 每盒）+（4个盒子 * 2 边距 * 5px 每个边距）= 464px + 40px = 504px

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

但是，如果我们将宽度限制为500px，那么计算恰好按照我们预期的方式进行。

  

500px * 0.23 宽度 = 115px

     

500px * 0.01 保证金 = 5px

     

（4个盒子 * 115px 每盒）+（4个盒子 * 2 边距 * 5px 每个边距）= 460px + 40px = 500px

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

这仅适用于页面右边缘的项目，因为这是发生包装的地方。当没有足够的可用水平空间时，设置为float: left的项目将换行。这就是为什么该项目基本上是下一行的第一个点。

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