Swapping li elements between multiple un-ordered lists using jQuery

I'm trying to allow the user to move the 'post-it' notes from one un-ordered list of tasks to another. Ideally when the user drags the task it should be removed from its current container and appended to the new list.

Pseudo HTML

<ul class="task-bucket" id="backlog-tasks">
    <!--开发者_运维问答 task a -->
    <!-- task b -->
    <!-- task c -->
</ul>
<ul class="task-bucket" id="do-tasks">
    <!-- task d -->
</ul>
<ul class="task-bucket" id="doing-tasks">
    <!-- task e -->
</ul>
<ul class="task-bucket" id="done-tasks">
    <!-- task f -->
</ul>

I'd like for tasks to be draggable between lists, e.g. when task e is finished it can be dragged into #done-tasks.

If you have a solution, feel free to build it on top of: http://jsfiddle.net/Zwedh/2/

Working solution: http://jsfiddle.net/RD5M6/3/

$(function(){   
    $('.task-bucket').sortable({
        connectWith: '.task-bucket'
    });

    $('.task').draggable({
        connectToSortable: '.task-bucket'
    });
    $('ul', 'li').disableSelection();
})

The solution is much simpler than I had originally anticipated! http://jqueryui.com/demos/sortable/

Check out jQuery UI's Droppable