Version 1.5Sortable user guide

Overview

The glow.widgets.Sortable widget allows you to make an element or elements sortable by dragging and dropping contained elements.

Using the Sortable widget

Creating a basic sortable

HTML

<ul id="glowers"> <li>Archibald</li> <li>Elson</li> <li>Holmes</li> <li>Hubbard</li> <li>Littledale</li> <li>Mathews</li> <li>Pearce</li> <li>Yandell</li>
</ul>

Javascript

//create sortable instance
var mySortable = new glow.widgets.Sortable('#glowers');

CSS

#glowers li { cursor: move;
}

Example

Common Sortable Options

The second argument to the Sortable constructor is an options object. This example demonstrates a number of useful options. The constrainDragTo option allows you to limit the dragging to a specific element - often the same element that contains the sortable items. The axis option allows you to constrain the dragging to a particular direction. It takes the values x and y to contrain it to horizontal dragging and vertical dragging respectively.

HTML

<ul id="cheese"> <li>Cheddar</li> <li>Pecorino Romano</li> <li>Scamorza</li> <li>Tylżycki</li> <li>Paneer</li>
</ul>

Javascript

//create sortable instance
var mySortable = new glow.widgets.Sortable('#cheese', { constrainDragTo : '#cheese', axis : 'y'
});

CSS

#cheese { cursor: n-resize;
}

Example

Customisable Homepage Demo

With glow.widgets.sortable it is possible to build a customisable homepage for your website. Consider the following HTML, JavaScript and CSS...

HTML

<div id="widgets-example"> <div class="widget"> <strong>News</strong> <ul> <li>Mexico shuts down to control flu</li> <li>Bankers made 'astonishing mess'</li> <li>Bankers made 'astonishing mess'</li> </ul> </div> <div class="widget"> <strong>Sport</strong> <ul> <li>Stockport go into administration</li> <li>Cup edge to Hamburg and Shakhtar</li> <li>Spurs star Bent out for two weeks</li> </ul> </div> <div class="widget"> <strong>Entertainment</strong> <ul> <li>First female Poet Laureate named</li> <li>Man convicted of stalking Banks</li> <li>Actor Sean Penn files for divorce</li> </ul> </div>
</div>

Javascript

new glow.widgets.Sortable( '#widgets-example'
); 

CSS

#widgets-example { background-color: #800; overflow: hidden; width: 240px;
} #widgets-example .widget { background-color: #fff; height: 160px; margin: 10px; width: 220px;
} #widgets-example .widget strong { cursor: move; display: block; padding: 1em 1em 0;
} #widgets-example .glow-sortable-dropindicator { border: 2px dotted #a22; margin: 10px;
}

... it allows you to build a simple page divided into sections, that you can change the order of:

Example

This example can be extended to be a multi-column homepage, letting you move sections of the page between different columns. The following code...

HTML

<div id="cols-example"> <div class="col1"> <div class="widget"> <strong>News</strong> <ul> <li>Mexico shuts down to control flu</li> <li>Bankers made 'astonishing mess'</li> <li>Bankers made 'astonishing mess'</li> </ul> </div> <div class="widget"> <strong>Sport</strong> <ul> <li>Stockport go into administration</li> <li>Cup edge to Hamburg and Shakhtar</li> <li>Spurs star Bent out for two weeks</li> </ul> </div> <div class="widget"> <strong>Entertainment</strong> <ul> <li>First female Poet Laureate named</li> <li>Man convicted of stalking Banks</li> <li>Actor Sean Penn files for divorce</li> </ul> </div> </div> <div class="rightCols"> <div class="feature"> <div class="feature-content"> <strong>Swine flu - get the latest news</strong> <ul> <li>Latest: The situation in the UK</li> <li>Map: How it's spreading</li> <li>How effective are face masks?</li> </ul> </div> </div> <div class="col2"> <div class="widget"> <strong>Food</strong> <ul> <li>Banana biscuits</li> <li>Boiled egg and soldiers</li> <li>Lamb with egg sauce</li> </ul> </div> <div class="widget"> <strong>Weird & Wonderful</strong> <ul> <li>Birds show off their dance moves</li> <li>Kenyan women hit men with sex ban</li> <li>Rare blue diamond goes on display</li> </ul> </div> </div> <div class="col3"> <div class="widget"> <strong>Science & Nature</strong> <ul> <li>Spider sex violent but effective</li> <li>'Safe' climate means 'no to coal'</li> <li>Russia mulls rocket power 'first'</li> </ul> </div> <div class="widget"> <strong>BBC iPlayer</strong> <ul> <li>Performance on 3</li> <li>Jo Whiley</li> <li>Journey into Space</li> </ul> </div> </div> </div> </div>

Javascript

new glow.widgets.Sortable( '#cols-example .col1, #cols-example .col2, #cols-example .col3', { draggableOptions : { handle : 'strong' } }
);

CSS

#cols-example .feature { background: #666; color: #fff; height: 160px; margin: 10px 10px 0; width: 420px;
} #cols-example .feature strong { display: block; padding: 1em;
} #cols-example .col1,
#cols-example .col2,
#cols-example .col3 { float: left; width: 220px;
} #cols-example .rightCols { float: left; width: 510px;
} #cols-example .widget { background: #fff; height: 160px; margin: 10px; width: 200px;
} #cols-example .widget strong { background: #aaa; color: #fff; cursor: move; display: block; padding: 1em;
} #cols-example .glow-sortable-dropindicator { border: 2px dotted #800; height: 160px; margin: 10px; width: 200px;
}

... produces this example:

Example

For a complete listing of methods and properties, Refer to the API.

Saving Widget Positions

Once a user has sorted page elements in a sortable widget, you probably want to persist this ordering in some way. The sorted page elements are moved in the DOM so that all you need to do is get them in order is to read them from the DOM in document order. This can be achieved using the glow.dom.NodeList.sort method.

The sortable widget provides the sort event that is fired when items within the sortable are moved, which is a convenient place to trigger saving the widget order.

HTML

<ul id="numbers"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li>
</ul>

Javascript

//create sortable instance
var mySortable = new glow.widgets.Sortable('#numbers', { onSort : function () { var order = []; glow.dom.get('#numbers > *').sort().each(function () { order.push(glow.dom.get(this).text()); }); alert('new order is: ' + order.join(', ')); }
});

CSS

#numbers li { cursor: default;
}

Example