3

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

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

这里发生了什么?为什么它只发生在边缘盒上,有没有办法解决这个问题?

这是实时仪表板。查看源代码以查看代码。

这是正确行为的屏幕截图。鼠标通过移动符号位于框的一角:

在此处输入图像描述

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

在此处输入图像描述

4

1 回答 1

2

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

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

让我们用一些数学来分解它。如果我们将宽度限制为 503px 的宽度,我们可以进行如下计算并看到我们超过了最大宽度。

503px * 0.23宽度= 115.69 ≈ 116px

503px * 0.01边距= 5.03 ≈ 5px

(4 个*每个框116 像素)+(4 个* 2 个边距*每个边距5 像素)= 464 像素 + 40 像素 = 504 像素

演示(不正确的行为) - 最大宽度设置为503px

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

500 像素* 0.23宽度= 115 像素

500 像素 * 0.01边距= 5 像素

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

演示(正确行为) - 最大宽度设置为500px

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

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

于 2013-02-27T09:50:10.953 回答