jQuery: Drag and Drop to multiple lists, not appending or re-draggable

Question

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

I'm trying to do it with draggable/droppable because of my strict requirements:

1. I have several days printed on the page

2. Each day has 3 lists: inbound, pending and processed

3. Items from inbound can be dragged to either the pending or processed lists

4. Those items will be appended to the bottom of the applied list

5. Items on the pending and processed lists cannot be dragged, except those which originated on the inbound list

Because of these my thoughts were to have the individual inbound list items be draggable and appended to the end of the applied 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 can see (1) it's not applying to the bottom of the list and (2) I cannot move it again after: http://jsfiddle.net/wGWTS/1/

Answer 1

EDIT: changed the code slightly since the inbound last was acting funny when it had no members.

I think you want to be using a combination of the connectWith and items options of sortable. Part of sortable's functionality is to accept items from other lists, via connectWith, so you don't need to make it droppable. By using the items property, you can choose which members of the list should be sortable, so to enforce condition #5 you want only items that came from the inbound list to be sortable. This is done by giving all inbound list items the class of "inbound".

Here is an example with inbound, pending, and outbound lists. Items in inbound can be moved between all 3 lists, and items originating in pending or outbound cannot be moved at all. See here for a fiddle: 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"
    });

});