JQuery: drag and drop to multiple lists, not add or drag

Question

I am trying to create a drag and drop from one list to one of the other two. I'm trying to use draggable and droppable , but this sortable demo is more like what I want: http://jqueryui.com/sortable/#connect-lists

I am trying to do this with draggable / droppable due to my strict requirements:

• I have a few days printed on the page

• Every day has 3 lists: incoming, pending and processed

• Inbox items can be dragged into pending or processed lists

• These items will be added to the bottom of the application list.

• Items in the pending and processed lists cannot be dragged, except those that appeared in the incoming list

Because of this, my thoughts were to have individual incoming list items be draggable and added to the end of the list.

Here is the JS code I'm using:

$(document).ready(function() {
    $('li.drag').draggable({
        revert: "invalid",
        revertDuration: 100
    });
    $('.pending-list').droppable({
        accept: ".inbound li",
        drop: function(event, ui) {
            $(this).appendChild($(ui));
        }
    });
    $('.processed-list').droppable({
        accept: ".inbound li",
        drop: function(event, ui) {
            $(this).append($(ui));
        }
    });
});

Here is my fiddle, but as you see (1), it does not apply to the bottom of the list, and (2) I cannot move it again: http://jsfiddle.net/wGWTS/1/

Answer 1

EDIT: changed the code a bit, since the last incoming one acted funny when it had no members.

, connectWith items sortable. , connectWith, droppable. items, , , № 5 , . "".

, . , , , . . : http://jsfiddle.net/ULmrD/4/

HTML

<div id=inbound class=sort>
    <ul>
        <li><b>Inbound</b></li>
        <li class=inbound>Inbound Item 1</li>
        <li class=inbound>Inbound Item 2</li>
        <li class=inbound>Inbound Item 3</li>
    </ul>
</div>
<div class=sort id=pending>
    <b>Pending</b>
    <ul>
        <li>Pending Item 1</li>
        <li>Pending Item 2</li>
    </ul>
</div>

<div class=sort id=outbound>
    <b>Outbound</b>
    <ul>
        <li>Outbound Item 1</li>
        <li>Outbound Item 2</li>
    </ul>
</div>

CSS

div.sort{
    border:1px solid black;
    display:inline;
    width:175px;
    float:left;
}
ul{
    height:200px;
    width:175px;
}

JQuery

$(document).ready(function() {
    $('div.sort li').disableSelection();

    $('#pending ul').sortable({
        revert: 'invalid',
        connectWith: "#inbound ul, #outbound ul",
        items: "li.inbound"
    });

    $('#outbound ul').sortable({
        revert: 'invalid',
        connectWith: "#inbound ul, #pending ul",
        items: "li.inbound"
    });

    $('#inbound ul').sortable({
        revert: 'invalid',
        connectWith: "#pending ul, #outbound ul",
        items: "li.inbound"
    });

});