jQuery的奇怪行爲排序：當拖動框時不在同一位置

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≈116像素

503px * 0.01 餘量 = 5.03≈5像素

（4 盒 * 116像素每盒）+（4 盒子 * 2 頁邊距 * 5px 每頁邊距）= 464px + 40px = 504px

DEMO (Incorrect Behavior) - 最大寬度設置爲503px

然而，如果我們限制了我們的寬度500像素，計算恰好制定出我們希望的方式。

500像素* 0.23 寬度 = 115px

500px的* 0。01 餘量 = 5像素

（4 盒 * 115px 每盒）+（4 盒 * 2頁邊距每餘量 * 5像素）= x 460像素的+ 40像素= 500px的

DEMO (Correct Behavior) - 最大寬度設定爲500px

這隻發生在頁面右邊的項目上，因爲這是發生包裝的地方。當沒有足夠的可用水平空間時，設置爲float: left的項目將進行換行。這就是爲什麼這個項目本質上會走到下一行的第一個地方。

在初始狀態不受影響的情況下，實際問題似乎是由排序過程中由jQuery UI執行的附加計算和DOM操作觸發的。