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/

Answer 1

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.

Answer 2

There are a few problems with what you are attempting but I have managed to make an example that fixes some of them. The over all problem is that those two Jquery UI plugins (sortable, resizable) do not support all the features that you want so at least one if not both will have to be rewritten or implemented from scratch. Some problems include:

1. The west handle causes width to increase and the css 'left' property to decrease causing problems with list items on the left side. The same problem exists with east and on the right side.
2. Having the list items positioned 'relative' or 'absolute' will cause them to not take up space in the flow of the page, hence the overlap.
3. Having three separate divs means that each item can only be a member of one list and you have to check the width to see if it also occupies other columns. Its a little messy.

On top of the example I have provided I believe you need to keep a data model programmatically that will keep track of each item and which columns it exists in and allow it to make corrections in the display as needed.

I've gathered that this is all some what related to representing a week and things going on in that time frame. While I think I've addressed the main issues of your question I find this problem entertaining and if you provide more context I'd be willing to help with the final product.