jquery sortable and resizable with overlapping list items

Question

I have multiple sortable lists side by side. You can resize the width of the divs to cover other lists. This enables one item to be part of more than one list.

I want to do this without any of the sortable divs overlapping.

See the fiddle at http://jsfiddle.net/2J6af/

EDIT: If you go to the fiddle above and extend the width of a sortable item, then move it around and drop. You'll see that it overlaps other sortable items. I want all sortable items to be arranged so there's no overlap.

EDIT: I have been through Dealing with overlapping jQuery sortable lists again as suggested by @KateA, and although it is similar, it talks about the lists overlapping rather than the sortable items covering multiple lists.

EDIT: In the finished product there will be 7 lists side by side, and I need to rearrange the sortables in a specific order after the user has dropped an item. I know you can add a function to the sort: event, maybe this is the key function to rearrange and check/correct any overlapping sortable items?

EDIT: I've also noticed that the sortable item behaves differently when dragging depending on if you have resized it using the left or the right handle. It gets confused about which list you're hovering over. e.g. if you resized using the left handle and you pick it up and try dropping it on the middle or right list, it will drop to whichever list is next on the left of the mouse pointer rather than where it is showing an empty placeholder under the mouse pointer.

EDIT: The jquery fullCalendar does exaclty what I need, but how did they do it? http://arshaw.com/fullcalendar/

EDIT: I've been working on extending the fiddle to the extent of my sortables knowledge, do you think I'm on the right track? http://jsfiddle.net/2J6af/17/

Take a look at stackoverflow.com/questions/4092817/… That helped me out — KateA
I have seen that post before asking this question but it's a different issue. — PaulMrG
Could bind the resizable event, figure out what many lists the element now spans, then drop placeholder elements in the same position (same index) on every list the element spans over. — mikeycgto
@mikeycgto that sounds like a suitable idea but I don't know how to get that info from the UI, or how to change the order manually after the drop? There's also the issue in my fourth edit with the dragging. I noticed fullCalendar only allows resizing on the right which might help. — PaulMrG

guzart guzart · Accepted Answer · 2012-04-18T07:26:59

fullcalendar seems to have a visual grid on the background, with the sortable items on top in a virtual grid, so they are most likely calculating their positions manually.

The way jQueryUI does the Sortable is by adding a placeholder to the list, which naturally (page flow) shows the space for the drop. I would suggest not to do it like this, I don't think there's a way you can cleanly hack jQueryUI to have the behavior you are looking for.

I would suggest you do the same thing as fullcalendar, use the draggable and resizable plugins, and move the elements out of the way using position absolute when the are overlapping with other items.

Don't set the snap feature to the draggable, but based on the position of the draggable, calculate the collisions and decide how to handle them, either moving them up or down.

jquery sortable and resizable with overlapping list items

2 Answers