Jquery sortables not working correctly

Question

Here is my code:

    $("#serviceSongs li").draggable({
        connectToSortable: '#serviceAssignedSongs',
        helper: 'clone'
    });

    $("#serviceAssignedSongs").sortable({
        placeholder: 'servicePlaceHolder'
    });

Basically it allows me to drag LI's from a draggable list to a sortable list.

When I reorder LI's within the sortable list it works perfect. Here is a screenshot of dragging within the sortable:

But when I drag an LI from the draggable list, it only lets me drop it above or below the very first LI item... Here is a screenshot when dragging an LI from the draggable: (see how the placeholder doesn't appear and I can't drop it?)

Answer 1

i suppose your placeholder is wrong:

$("#serviceAssignedSongs").sortable({
    placeholder: 'servicePlaceHolder'
});

shouldn't that rather be

$("#serviceAssignedSongs").sortable({
    placeholder: '#servicePlaceHolder'
});

??