How to append <li> to <ul> using draggable and droppable?

Question

I have a tiny problem controlling where my <li> objects go when I use draggable and droppable from JQuery UI.

I have created this pretty elaborative fiddle to illustrate my problem: JSFiddle

Why doesn't the .courseBox go into the .semester <ul>?

The .courseBox should be movable back and forth and it's not only when trying to append it to the .semester I have this problem. It happens when trying to move the .courseBox back to the .basket as well.

I believe it could have something to do with my moveCourse function.

Answer 1

I found this by searching around a little. jQuery draggable + droppable: how to snap dropped element to dropped-on element

The answer from Berry Pitman did the trick. I updated my drop-code to the following and removed the moveCourse() function:

drop: function(ev, ui) {
    var dropped = ui.draggable;
    var droppedOn = $(this);
    $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}

Updated JSFiddle