CODEWITHSUNDEEP
jquerycssjquery-uisortingjquery-ui-sortable
Itay P.
Itay P.

Reputation: 69

jQuery UI sortable - keep the divs one after another with different widths

I have a problem - I want to use the jQuery UI sortable plugin on a list with different items widths, like 1 li that have 100% of the total width, and another that have 50% of the total width.
The problem starts when the elements have different heights - it's float one after another (as any normal element with float would do), but I want them not to have the spaces between the next items, like in this picture: https://i.sstatic.net/tMOBS.jpg

I tied to find something about that - but all I've found is stuff about 2 columns linking, and it doesn't helps me because I can't use the 100% width element..

this is my sortable area: https://i.sstatic.net/ncIk1.jpg

Many thanks

Upvotes: 0

Views: 2570

Answers (1)

Sinetheta
Sinetheta

Reputation: 9429

Just follow the docs. Sortable + float = fun. Example here: jsFiddle

edit: Sorry Joe, I misunderstood your question. In order to create a grid of things with different heights you can't use floats. In fact there are very few ways you can layout things with different widths and heights. Doing it programatically like Masonry does is the only thing that comes to mind; as shown in this demo.

Upvotes: 2

Related Questions