Sortable causes erratic behaviour with floated percent items

[ilawton]

Sortable issue with floated elements with percentage widths

After applying sortable to floated elements with percent based widths, dragging the last item of a row can "sometimes" cause the element to jump to the next row (ui-sortable-helper).

This behaviour is only seen when the container is at particular widths... and thus has a random nature (mainly seen when applying sortable to responsive elements such as bootstrap styled columns)

It appears to only be an issue when the container width divided by columns has .75 remainder. E.g. a container with a width of 239px and items with widths of 25% (239/4 = 59.75).

The browser deals with the above example, but sortable appears to apply a fixed width to the placeholder (or/and helper) and thus chaos ensues.

See JSFiddle example below... Dragging the orange box will highlight the issue:

​http://jsfiddle.net/ilawton/dhx6rwss/1/

Tested with Chrome and Firefox.

[ilawton]

It appears a work around is to clone the helper.

$( ".selector" ).sortable({
  helper: "clone"
});

[timofeym]

This is a real problem when working with percentage-based and/or responsive layouts. I have made another test here that might help: ​http://jsfiddle.net/L73emav1/4/

[timofey-m]

Replying to timofeym:

This is a real problem when working with percentage-based and/or responsive layouts.

Isolated test case updated with latest versions of jQuery (3.1.1) and jQuery UI (1.12.1): ​http://jsfiddle.net/L73emav1/6/

Now the bug is solved. It looks like this jQuery fix solved it: ​https://github.com/jquery/jquery/issues/1724