Question

I’ve created a nested, unordered HTML list and applied both, jQuery UI draggable and jQuery UI droppable to the list items which works great.

The thing is that the list doesn’t format itself when dropping list items into other list items and this leads to the wildest things once you dragged some items.

Since I don’t want to kill any (further) jQuery bindings to the elements I’ve tried to detach and attach the list items again but that didn’t work.

You can see the problem for yourself here

So the question is: how can I get the list to be always formatted like it is on the loading of the page?

Answer 1

Nevermind, here’s the solution.

            drop: function (e, ui)
            {
                var draggable = $(ui.draggable).detach();
                $(this).find("ul:topmost").append(draggable);

                // solution:
                draggable.css({
                    left: '',
                    top: ''
                });
            }