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');
Copyright © Oğuzhan Eroğlu, licensed under MIT.
Fork me on GitHub