#11517 new bug ()

Opened March 17, 2015 10:39AM UTC

Last modified November 23, 2016 09:20PM UTC

Sortable causes erratic behaviour with floated percent items

Reported by: ilawton Owned by:
Priority: minor Milestone: none
Component: ui.sortable Version: 1.11.3
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (3)

Changed March 17, 2015 11:20AM UTC by ilawton comment:1

It appears a work around is to clone the helper.

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

Changed March 25, 2015 08:32PM UTC by timofeym comment:2

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/

Changed November 23, 2016 09:09PM UTC by timofey-m comment:3

_comment0: Replying to [comment:2 timofeym]: \ > This is a real problem when working with percentage-based and/or responsive layouts. \ \ Isolated test case updated with latest version of jQuery UI (1.12.1): \ http://jsfiddle.net/L73emav1/5/ → 1479935886965118
_comment1: Replying to [comment:2 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! Looks like this jQuery issue solved it https://github.com/jquery/jquery/issues/1724 → 1479936003753914

Replying to [comment:2 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