Hi, I'm building an application using jQuery, heavily based on the Sortable/Draggable interface. The interface is helping me a lot, however I've found some issues that heavily affect the performance and usability of my application, to the point where its deployment is at high risk. I'll appreciate all the help you can provide (it will be a shame to throw this application to the trash can):
So the issues are:
1) Nested sortable containers cannot accept elements tagged with classes accepted by its parent sortable container too, but not accepted by them. I have a nested sortable container B (green color) that accepts a subset of the elements accepted by its parent sortable container A. The logic says that tagging the elements with two different classes, one for container A and other for container B (the subset accepted by B will be tagged with both classes) will do the trick easily (so the Text button has both classes, Number button has only the parent container's class, and Message button has only the container B class). However it's not the case. When I add both classes to the draggable element I cannot drop it into the B sortable container, only on the parent or any other nested sortable container with the same accepted class of the parent (the red container). If I remove the class for container A then I can drop inside of B, but of course it's not possible to drop in A. Everything works fine if container B is not nested within A (as you can see in the green container which is not nested).
2) Nested sortable containers need to contain children elements (used as wrappers) in order to be able to drop other elements inside. I had to create hidden divs in my nested sortable containers so they can accept new elements. It needs 2 though, and at least one not hidden, otherwise you cannot drop above the first element (don't know why). As you can see in the example, the first red container cannot be used since it doesn't contain any child. The second container works "as expected" because it contain 2 children, which will wrap the other elements. If the first element is hidden then it's not possible to add elements above the first element.
3) Having nested sortable containers ,floating horizontally, will add the dropped elements only to the last container. I have 2 or more nested containers, all of them siblings, floating horizontally on the same row. When I drag an element it will only add it to the last container, even when I'm hovering over the other containers.
4) Cannot drop on the sides of an already dropped element. I've tried many configurations for the sortable containers, using the axis property, etc., but I cannot get my elements to be dropped on the left or right of an already dropped element. They always go above or below, which means that if I have 2 or more elements on the same row I cannot drop a new element between them.
5) Performance decreases considerably fast as more markup is added. I'd like to say this is my main issue but the truth is that all of them are crucial at this point. I've tracked the main slowdown to the first call to any of the dynamic properties such as offsetWidth, offsetHeight, etc. According to my tests the first call to one of this takes most of the time used for the drag and drop functionality. However, in the example that I'm posting now I didn't such big spike (anyway I detected many other spikes at the sortable interface functions such as the highlight and the measure functions). I'm not sure what's going on there, or how this can be improved, but the slowdown is measured in seconds without having that much markup, and increases really fast. As you can see in the example, there's not that much markup involved nor many nested sortable containers and the slowdown is considerable.
I'd really appreciate any help you can provide me on any of these.
Thanks,
_______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
