Example: Multiple Lists - Outer Join

Note: When using an outer or inner joined list, you must pick a moveType of 'move' or 'copy', the default 'swap' won't give you the results you expect.

This example assumes that you have seen the Multiple Sortable Lists - Full Join example and continues from there.

Setting Up the List

First we need to create the HTML structure for the lists. Since Sortable uses Y.DD.Delegate, we need to set up the delegation containers (#list1, #lists2) and the list items (li).

<div id="demo" class="yui3-g">
    <div class="yui3-u-1-2">
        <h4 class="no-toc">List 1</h4>
        <ul id="list1">
            <li class="one">1</li>
            <li class="one">2</li>
            <li class="one">3</li>
            <li class="one">4</li>
            <li class="one">5</li>
            <li class="one">6</li>
            <li class="one">7</li>
            <li class="one">8</li>
            <li class="one">9</li>
            <li class="one">10</li>
        </ul>
	</div>
    <div class="yui3-u-1-2">
        <h4 class="no-toc">List 2</h4>
        <ul id="list2">
            <li class="two">A</li>
            <li class="two">B</li>
            <li class="two">C</li>
            <li class="two">D</li>
            <li class="two">E</li>
            <li class="two">F</li>
            <li class="two">G</li>
            <li class="two">H</li>
            <li class="two">I</li>
            <li class="two">J</li>
        </ul>
    </div>
</div>

Now we give the lists some CSS to make them visible.

#demo h4 {
    margin: 10px auto;
    width: 165px;
    text-align: center;
}
#demo ul {
    margin: 0 auto;
    width: 165px;
    padding: 0;
}
#demo li {
    list-style-type: none;
    padding: 3px;
    width: 150px;
    margin: 6px;
    font-size: 114%;
    -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
    cursor: move;
}
#demo li.one {
    background-color: #B6BFDA;
    border: 1px solid #7E869D;
}
#demo li.two {
    background-color: #F2C89F;
    border: 1px solid #B19C87;
    text-align: center;
}

Setting Up the YUI Instance

Now we need to create our YUI instance and tell it to load the sortable module.

In this example we are also going to attach a DD plugin to the Sortable instances.

YUI().use('dd-constrain', 'sortable', function (Y) {
    // Code here.
});

Making the Lists Draggable

Now that we have a YUI instance with the sortable module, we need to instantiate a Sortable instance on each of the lists.

YUI().use('dd-constrain', 'sortable', function(Y) {
    var list1 = new Y.Sortable({
        container: '#list1',
        nodes: 'li',
        opacity: '.1'
    });

    var list2 = new Y.Sortable({
        container: '#list2',
        nodes: 'li',
        opacity: '.1'
    });

});

Applying a DD Plugin

Since Sortable uses DD.Delegate, there is a dd instance available after instantiation.

The DD.Delegate reference is found on the .delegate property of the Sortable. This DD.Delegate instance has a DD.Drag instance bound to the dd property on the DD.Delegate

list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
    constrain2node: '#demo'
});
list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
    constrain2node: '#demo'
});

Applying the Plugin.DDConstrained to the Sortable instance.

YUI().use('dd-constrain', 'sortable', function(Y) {
    var list1 = new Y.Sortable({
        container: '#list1',
        nodes: 'li',
        opacity: '.1'
    });

    var list2 = new Y.Sortable({
        container: '#list2',
        nodes: 'li',
        opacity: '.1'
    });

    list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#demo'
    });
    list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
        constrain2node: '#demo'
    });

});

Joining the Lists

Joining the lists is as simple as calling the join method on one list passing in another list. By default, we use a full join which joins both lists both ways.

You can optionally specify the join type: inner or outer. The moveType can also be specified on the list: swap, move or copy. swap is the default, as seen in this example.

list1.join(list2);              //Full join <-- both ways -->
list1.join(list2, 'outer');     //Outer join --> one way -->
list1.join(list2, 'inner');     //Inner join <-- one way <--

Putting it together

YUI().use('dd-constrain', 'sortable', function(Y) {
    var list1 = new Y.Sortable({
        container: '#list1',
        nodes: 'li',
        opacity: '.1'
    });

    var list2 = new Y.Sortable({
        container: '#list2',
        nodes: 'li',
        opacity: '.1'
    });

    list1.join(list2, 'outer');
});