jQuery UI Sortable / Drag - List

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<ul class="grid clearfix">
    <li>1 <a href="">X</a></li>
    <li>2 <a href="">X</a></li>
    <li>3 <a href="">X</a></li>
    <li>4 <a href="">X</a></li>
    <li>5 <a href="">X</a></li>
    <li>6 <a href="">X</a></li>
    <li>7 <a href="">X</a></li>
    <li>8 <a href="">X</a></li>
    <li>9 <a href="">X</a></li>
    <li>10 <a href="">X</a></li>
</ul>

CSS

ul {
    margin:20px 0 40px 20px;
    padding:0;
    width:640px;
}
li{
    float:left;
    width: 290px;
    margin:0 10px 10px 0;
    padding:5px;
    height:35px;
    line-height:35px;
    background-color: #EBEBEB;
    cursor: move;
    list-style: none;
}
li > a {
    display: inline-block;
    float: right;
}
.placeholder {
    border: 1px dashed #CCC;
    background-color: white;
    height: 35px;
}

JavaScript

$(function () {
    
    //Begin Sorter
    $(".grid").sortable({
        start : function(event, ui) {
            var start_pos = ui.item.index() +1;
            ui.item.data('start_pos', start_pos);
        },
        update : function(event, ui) {
            var start_pos = ui.item.data('start_pos');
            var end_pos = $(ui.item).index();
            alert('Starting at: ' + start_pos + '\n' + 'Ending at: ' + end_pos);
        },
        tolerance: 'pointer',
        revert: true,
        placeholder: 'placeholder',
        forceHelperSize: true
    });
    
});//end doc ready