Question

I have two pairs of drag/drop/sortable lists using JqueryUI.http://jqueryui.com/demos/sortable/

My problem is that I can move items from sortable1, sortable2 into sortable3 and 4. I want them to be debated. So items can only move between ( 1 and 2 ) and (3 and 4).

Do I have to assign a different class to sortable3 and sortable4 for this to happen? Is there anyway I can somehow combine the function?

$(function() {
        $( "ul.droptrue" ).sortable({
            connectWith: "ul"
        });

        $( "ul.dropfalse" ).sortable({
            connectWith: "ul",
            dropOnEmpty: false
        });

        $( "#sortable1, #sortable2" ).disableSelection();
        $( "#sortable3, #sortable4").disableSelection();

});


<ul id="sortable1" class='droptrue'>
    <li class="ui-state-default">Can be dropped..</li>
    <li class="ui-state-default">..on an empty list</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class='dropfalse'>
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class='droptrue'>
    <li class="ui-state-default">Can be dropped..</li>
    <li class="ui-state-default">..on an empty list</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable4" class='dropfalse'>
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>

Answer 1

Because of your droptrue and dropfalse parameters, and the fact that you have unique id’s on each list, you don’t need to change the markup, you just need to call the .sortable function a bit differently:

    $( "#sortable1" ).sortable({
        connectWith: "#sortable2"
    });

    $( "#sortable2" ).sortable({
        connectWith: "#sortable1",
        dropOnEmpty: false
    });

    $( "#sortable3" ).sortable({
        connectWith: "#sortable4",
    });

    $( "#sortable4" ).sortable({
        connectWith: "#sortable3",
        dropOnEmpty: false
    });

Alternatively, you could use an object to set up the parameters of each sortable item, and iterate through the object, using the parameters to apply .sortable to each:

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true},
 {"listid":"#sortable2", "connectid":"#sortable1", "drop":false},
 {"listid":"#sortable3", "connectid":"#sortable4", "drop":true},
 {"listid":"#sortable4", "connectid":"#sortable3", "drop":false}];

$.each(lists, function(i, list) {
    $(list.listid).sortable({
        connectWith: list.connectid,
        dropOnEmpty: list.drop
    });
});

EDIT:
Based on your comment, this is how you could tie in yet another list (#sortable5, connecting to both #sortable3 and #sortable4). Note the use of multiple id’s, separated by commas:

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true},
 {"listid":"#sortable2", "connectid":"#sortable1", "drop":false},
 {"listid":"#sortable3", "connectid":"#sortable4, #sortable5", "drop":true},
 {"listid":"#sortable4", "connectid":"#sortable3, #sortable5", "drop":false},
 {"listid":"#sortable5", "connectid":"#sortable3, #sortable4", "drop":false}];