Demo: sort – MoreCSS Documentation

Example 01: Sort list via drag and drop or list text.

Image 01
Image 02
Image 03
Image 04
Image 05
Image 06
Image 07
Image 08
Image 09

<!-- EXAMPLE 01 -->

<h3>Example 01: Sort list via drag and drop or list text.</h3>

<ul id="example">
	<li><strong style="background-image: url(pages/sort-demo/thumbs/01.jpeg)">Image 01</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/02.jpeg)">Image 02</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/03.jpeg)">Image 03</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/04.jpeg)">Image 04</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/05.jpeg)">Image 05</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/06.jpeg)">Image 06</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/07.jpeg)">Image 07</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/08.jpeg)">Image 08</strong></li>
	<li><strong style="background-image: url(pages/sort-demo/thumbs/09.jpeg)">Image 09</strong></li>
</ul>

<p id="options">
	Sort list: 
	<a href="#normal" class="normal">Normal</a> | 
	<a href="#reverse" class="reverse">Reverse</a> | 
	<a href="#shuffle" class="shuffle">Shuffle</a>
</p>

/* EXAMPLE 01 */

ul, li {
	width: 300px;
	margin: 0;
	padding: 0;
}

li {
	height: 50px;
	list-style-type: none;
}

li strong {
	display: block;
	padding-left: 75px;
	background-color: #f6f6f6;
	background-position: left top;
	background-repeat: no-repeat;
	line-height: 45px;
}

.placeholder {
	background-image: url(placeholder-background.png);
}

.drag {
	background: transparent url(drag-background.png) no-repeat left top;
}

/* EXAMPLE 01 */

#example li {
	sort: drag;
	sort-container: example;
	sort-placeholder-class: placeholder;
	drag-class: drag;
}

#options a.normal:active => #example li {
	sort: standard;
	sort-container: example;
}

#options a.reverse:active => #example li {
	sort: reverse;
	sort-container: example;
}

#options a.shuffle:active => #example li {
	sort: shuffle;
	sort-container: example;
}