jSortable
jquery plugin for making sortable elements
Load
(The plugin depends to jquery.event.drag plugin)
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.event.drag-2.2.js"></script> <script type="text/javascript" src="js/jquery.jsortable.js"></script>
Vertical
Element 1
Element 2
Element 3
Element 4
HTML
<div class="example1"> <div class="box1"> Element 1 </div> <div class="box1"> Element 2 </div> <div class="box1"> Element 3 </div> <div class="box1"> Element 4 </div> </div>
CSS
.box1 { width: 500px; background: #505050; text-align: left; color: white; border-radius: 2px; border-bottom: 2px solid rgba(0,0,0,0.2); padding: 10px 10px; cursor: move; font-size: 13px; margin-bottom: 5px; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; }
Javascript
var $example1 = $('.example1'); $example1.jsortable({ mode: $.fn.jsortable.MODE_VERTICAL, sortable: '.box1', show_target_placeholder: true, show_source_placeholder: false }); $example1.on('jsortable_updated', function (event) { console.log($example1.jsortable('getElements')); });
Horizontal
Element 1
Element 2
Element 3
Element 4
HTML
<div class="example2"> <div class="box2"> Element 1 </div> <div class="box2"> Element 2 </div> <div class="box2"> Element 3 </div> <div class="box2"> Element 4 </div> <div class="clear"></div> </div>
CSS
.box2 { background: #505050; text-align: left; color: white; border-radius: 2px; border-bottom: 2px solid rgba(0,0,0,0.2); padding: 10px 10px; cursor: move; font-size: 13px; margin-bottom: 5px; margin-right: 5px; width: 100px; height: 100px; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; float: left; }
Javascript
$(document).ready(function () { $('.example2').jsortable({ mode: $.fn.jsortable.MODE_HORIZONTAL, sortable: '.box2', show_target_placeholder: true, show_source_placeholder: false }); });
Parameters
There is 4 parameters in jsortable.
mode - Maybe $.fn.jsortable.MODE_HORIZONTAL or $.fn.jsortable.MODE_VERTICAL. - Integer
sortable - Sortable item selector. - String
show_target_placeholder - Show target placeholder. - Boolean
show_source_placeholder - Show source placeholder seperately with target placeholder. - Boolean
Events
There is one event in jsortable.
jsortable_updated - Fires on update queuee
Example
$example1.on('jsortable_updated', function (event) { console.log($example1.jsortable('getElements')); });
Methods
There is one method in jsortable.
getElements() - Gets jQuery list sortable elements
Example
$example1.jsortable('getElements');