Opened 4 years ago

Last modified 2 years ago

#11517 new bug

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.

Change History (3)

comment:1 Changed 4 years ago by ilawton

It appears a work around is to clone the helper.

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

comment:2 Changed 4 years ago by 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/

comment:3 in reply to:  2 Changed 2 years ago by 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

Last edited 2 years ago by timofey-m (previous) (diff)
Note: See TracTickets for help on using tickets.