CODEWITHSUNDEEP
jqueryjquery-ui-sortablejquery-ui-draggable
Jon
Jon

Reputation: 3184

Odd Behavior with jQuery Sortable: Box not staying in the same place when dragging

I'm implementing jQuery sortable on a dashboard that I'm building so that users can customize their dashboard view.

Elements on the left and in the center of the dashboard behave correctly when the handle is clicked. Elements on the far right, however, are showing weird behavior when I try and drag them around. I can still drag and drop them around the grid, but the mouse isn't remaining on the handle...the box is jumping across the screen.

What is going on here? Why does it only happen for the edge boxes, and is there a way to fix this?

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

Here's a screenshot of the correct behavior. The mouse is on the corner of the box by the move symbol:

enter image description here

Here's a screenshot of the odd behavior. The mouse is actually in the empty grey space, but the module has jumped to the bottom left corner of the browser:

enter image description here

Upvotes: 3

Views: 1430

Answers (1)

Ruben Infante
Ruben Infante

Reputation: 3135

This has to do with the browser's calculations of the percentage values.

You are attempting to use up exactly 100% of the browser width among the various components. For example, if the browser attempts to calculate what 23% of the browser width is four times and then calculates what 1% of the margin is 8 times (adding up to an expected 100%), there in no guarantee that the sum of those components will not be over the actual width of the browser window after rounding. Certain total widths will work while others will not.

Lets break this down with some math. If we constrain our width to a width of 503px, we could do the calculations as follows and see that we exceed our maximum width.

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) - Max width set to 503px

However, if we constrain our width to 500px, the calculations just happen to work out the way we would expect.

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) - Max width set to 500px

This only occurs for the items on the right edge of the page because that is where wrapping will occur. Items that are set to float: left will wrap when there is not enough available horizontal space. That is why the item essentially goes to the first spot on the next line.

The actual issue appears to be triggered by additional calculations and DOM manipulation performed by jQuery UI during sorting given that the initial state is unaffected.

Upvotes: 2

Related Questions