jQuery UI Sortable / Drag - List 2

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="grid clearfix">
    
    <div class="item-wrapper">
        <span class="item-count"></span>
        <div class="item"> Item Name <a href="">X</a></div>
    </div>
    
</div>

CSS

.grid {
    margin:20px 0 40px 20px;
    padding:0;
    position: relative;
    width: 300px;
    height:400px;
    border:1px solid #ccc;
}

.item-wrapper {
    position: relative;
}
.item-count {
    font-size:12px;
    font-weight:bold;
    font-style:italic;
    color:#000;
    position:absolute;
    right:0;
}
.item {
    height:35px;
    margin:0 10px 10px 0;
    padding:5px;
    line-height:35px;
    /*background-color:;*/
    cursor: move;
    
}
.item > 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);
        },
        //items: '> li:not(.count)',
        tolerance: 'pointer',
        revert: true,
        placeholder: 'placeholder',
        forceHelperSize: true
    });
    
});//end doc ready