Orderlist OrderList is used to sort a collection via Drag and Drop based reordering feturing transition effects, custom content support and more.

Basic

Advanced

OrderList is applied to select element. Items can either be populated from the option elements or using the datasource that can be a local javascript array or function to load the array.

$('#list').puiorderlist();
                                
<select id="list"></select>
                                
Name Type Default Description
controlsLocation string none Location of buttons, valid values are none, left and right.
dragdrop boolean true Defines if items can be reordered usign dragdrop.
effect string fade Name of the jQuery UI effect.
caption string null Caption text for the list.
responsive boolean false When enabled, orderlist layout adjusts itself according to screen size.
datasource array/function null An array of items or a function to provide the items in case items are not provided declaratively via option tags.
content function null Template of an item to customize content.
Name Parameters Description
reorder event: puiorderlistreorder event Fired when list is reordered.

Example

                $('#default').puiorderlist({
                    reorder: function(event) {
                        
                    }
                });
                                

No methods.

$(function() {
    var themes = new Array('afterdark', 'afternoon', 'afterwork', 'aristo', 'black-tie', 'blitzer', 'bluesky', 'bootstrap', 'casablanca', 'cruze',
                'cupertino', 'dark-hive', 'dot-luv', 'eggplant', 'excite-bike', 'flick', 'glass-x', 'home', 'hot-sneaks', 'humanity', 'le-frog', 'midnight',
                'mint-choc', 'overcast', 'pepper-grinder', 'redmond', 'rocket', 'sam', 'smoothness', 'south-street', 'start', 'sunny', 'swanky-purse', 'trontastic',
                'ui-darkness', 'ui-lightness', 'vader');

    $('#basic').puiorderlist();

    $('#advanced').puiorderlist({
        controlsLocation: 'left',
        caption: 'Themes',
        effect: 'bounce',
        responsive: true,
        datasource: themes,
        content: function(option) {
            return $('<div class="ui-helper-clearfix"><img src="resources/demo/images/themes/' + option.text() + '.png" alt="" style="float:left"/><span style="float:left; margin-left:15px; font-size:20px">' + option.text() + '</span></div>');
        }
    });

    $('#doc').puitabview();
});
                                
<div class="pui-grid pui-grid-responsive">
    <div class="pui-grid-row">
        <div class="pui-grid-col-6">
            <h3 class="first">Basic</h3>
            <select id="basic">
                <option value="1">Volkswagen</option>
                <option value="2">Ford</option>
                <option value="3">Mercedes</option>
                <option value="4">Audi</option>
                <option value="5">BMW</option>
                <option value="6">Honda</option>
                <option value="7">Porsche</option>
                <option value="8">Chevrolet</option>
                <option value="9">Jaguar</option>
            </select>
        </div>
        <div class="pui-grid-col-6">
            <h3>Advanced</h3>
            <select id="advanced"></select>
        </div>
    </div>
</div>