jQuery: Trouble with draggable across cloned elements

Question

I'm trying to implement:

1. User drags a draggable li to a droppable li.
2. The original li is no longer draggable
3. A new li is cloned from the original li, and is appended to the droppable li.

I can't get it to work.

function moveToTerm(original_course, helper, term) {

 var cloned_course = original_course.clone(true);

 original_course.addClass('already-scheduled');

 original_course.draggable('disable');
 cloned_course.draggable();

 cloned_course.appendTo(term).hide().fadeIn('slow');
}

This works fine, except now the cloned_course is not draggable.

A droppable li:

    <li class="term ui-droppable">
        <strong>Fall 2010</strong>
        <li class="course">Computing Cultures</li>

        <!-- this course was just dropped. I want it to be draggable but it's not -->
        <li class="course ui-draggable" style="display: list-item;">New Media and Society</li>
    </li>

What am I doing wrong?

Answer 1

What does

cloned_course.appendTo(term).hide().fadeIn('slow').draggable();

do? I suspect draggable() only works on elements that have been attached to the DOM.