YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Sortable List Utility: Multiple Sortable Lists - Inner Join

## Sortable List Utility: Multiple Sortable Lists - Inner Join

This example makes multiple sortable lists that are inner joined together. In the example below you will see 2 lists. Both lists are sortable, but List #2 can move its items into List #1 and they become sortable. However, List #1 can not move its items into List #2.

View example in new window.

### List #1

- Item #1.1
- Item #1.2
- Item #1.3
- Item #1.4
- Item #1.5
- Item #1.6
- Item #1.7
- Item #1.8
- Item #1.9
- Item #1.10

### List #2

- Item #2.1
- Item #2.2
- Item #2.3
- Item #2.4
- Item #2.5
- Item #2.6
- Item #2.7
- Item #2.8
- Item #2.9
- Item #2.10

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.

### Joining the lists

After creating the `Sortable` lists, we will do an `inner` join. Joining `list1` with `list2` on the inside. But first we need to choose a `moveType`. The `moveType` will determine how an item is moved from one list to another: `swap`, `move` or `copy`. For this example we are using the `move` type.

        var list1 = new Y.Sortable({        container: '#list1',        nodes: 'li',        opacity: '.1',        moveType: 'move' //This is important    });

        var list1 = new Y.Sortable({
            container: '#list1',
            nodes: 'li',
            opacity: '.1',
            moveType: 'move' //This is important
        });

var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1', moveType: 'move' //This is important });

        list1.join(list2, 'inner');

        list1.join(list2, 'inner');

list1.join(list2, 'inner');

### Full Example Source

    YUI().use('dd-constrain', 'sortable', function(Y) {    var list1 = new Y.Sortable({        container: '#list1',        nodes: 'li',        opacity: '.1',        moveType: 'move'    });    list1.delegate.dd.plug(Y.Plugin.DDConstrained, {        constrain2node: '#demo'    });     var list2 = new Y.Sortable({        container: '#list2',        nodes: 'li',        opacity: '.1'    });    list2.delegate.dd.plug(Y.Plugin.DDConstrained, {        constrain2node: '#demo'    });      list1.join(list2, 'inner');});

    YUI().use('dd-constrain', 'sortable', function(Y) {
        var list1 = new Y.Sortable({
            container: '#list1',
            nodes: 'li',
            opacity: '.1',
            moveType: 'move'
        });
        list1.delegate.dd.plug(Y.Plugin.DDConstrained, {
            constrain2node: '#demo'
        });

        var list2 = new Y.Sortable({
            container: '#list2',
            nodes: 'li',
            opacity: '.1'
        });
        list2.delegate.dd.plug(Y.Plugin.DDConstrained, {
            constrain2node: '#demo'
        });

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

YUI().use('dd-constrain', 'sortable', function(Y) { var list1 = new Y.Sortable({ container: '#list1', nodes: 'li', opacity: '.1', moveType: 'move' }); list1.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' }); var list2 = new Y.Sortable({ container: '#list2', nodes: 'li', opacity: '.1' }); list2.delegate.dd.plug(Y.Plugin.DDConstrained, { constrain2node: '#demo' }); list1.join(list2, 'inner'); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings