jQury UI Sortable
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<ul id="sortable" class="thumbnails">
<id id="output0">
<li>
<div class="thumbnail selected">
<img class="img-responsive" src="http://placehold.it/52&text=1" width="52" height="52">
</div>
</li>
</id>
<id id="output1">
<li>
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/52&text=2" width="52" height="52">
</div>
</li>
</id>
<id id="output2">
<li>
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/52&text=3" width="52" height="52">
</div>
</li>
</id>
<id id="output3">
<li>
<div class="thumbnail">
<img class="img-responsive" src="http://placehold.it/52&text=4" width="52" height="52">
</div>
</li>
</id>
</ul>
CSS
ul.thumbnails {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.thumbnails ul {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.thumbnails li.group_title {
float: none;
}
ul.thumbnails id {
margin: 0px 12px 12px 0px;
float: left;
}
ul.thumbnails li .thumbnail {
padding: 6px;
border: 1px solid #dddddd;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
ul.thumbnails li .thumbnail img {
-webkit-user-drag: none;
}
ul.thumbnails li .thumbnail.selected {
background: #0088cc;
}
JavaScript
$(function () {
$("#sortable").sortable({
revert: true
});
});