Version 1.4Sortable Widget

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

Sortable Widgets

HTML

<div id="widgets-example"> <div class="widget">widget 1</div> <div class="widget">widget 2</div> <div class="widget">widget 3</div>
</div>

Javascript

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

CSS

 #widgets-example { background-color: red; padding: 5px 0; width: 200px; height: 390px;
} #widgets-example .widget { position: relative; background-color: #AAA; width: 180px; margin: 5px 10px; height: 120px; float: left; overflow: hidden;
} #widgets-example .glow-sortable-dropindicator { border: 2px dotted blue; margin: 2px 7px; float: left; overflow: hidden;
} 

Example

HTML

<div id="cols-example"> <div class="col1"> <div class="widget">widget 1</div> <div class="widget">widget 2</div> <div class="widget">widget 3</div> </div> <div class="rightCols"> <div class="feature"> <div class="feature-content">This is a feature.</div> </div> <div class="col2"> <div class="widget">widget 4</div> <div class="widget">widget 5</div> </div> <div class="col3"> <div class="widget">widget 6</div> <div class="widget">widget 7</div> </div> </div>
</div>

Javascript

new glow.widgets.Sortable( '#cols-example .col1, #cols-example .col2, #cols-example .col3'
); 

CSS

#cols-example:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
} #cols-example { width: 600px; padding: 0px; margin: 10px;
} #cols-example .feature { float: left; background-color: #666; color: white; height: 150px; width: 400px; margin: 0;
} #cols-example .col1, #cols-example .col2, #cols-example .col3 { padding: 2px 3px 3px 3px; margin: 0; min-height: 10px; float: left; width: 194px;
} #cols-example .col1 { background-color: #FAA;
} #cols-example .col2 { background-color: #AFA;
} #cols-example .col3 { background-color: #AAF;
} #cols-example .rightCols { float: left; width: 400px; padding: 0; margin: 0;
} #cols-example .widget { float: left; background-color: #AAA; width: 190px; margin: 3px 2px 2px 2px; height: 120px; /* fix double left margin IE bug - http://www.positioniseverything.net/explorer/doubled-margin.html */ display: inline;
} #cols-example .glow-sortable-dropindicator { float: left; width: 190px; padding: 0; border: 2px dotted blue; margin: 1px 0 0 0; display: inline; position: relative;
} 

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