jqueryui_sortable_transition

ul with sortable list items which change positions smoothly

by voodoomonkey

HTML

<ul class="draggablejumplist">
    <li class="jump">Jump1</li>
    <li class="jump">Jump2</li>
    <li class="jump">Jump3</li>
    <li class="jump">Jump4</li>
    <li class="jump">Jump5</li>
</ul>

CSS

.jump {
    color:white;
    width:100px;
    height:100px;
    display:inline;
    list-style-type:none;
    margin-left:25px;
    margin-right:25px;
    margin-bottom:25px;
    float:left;
    background-color:blue;
}

JavaScript

$(".draggablejumplist").sortable({
    start: function (event, ui) {
        ui.item.startPos = ui.item.index();
    },
    stop: function (event, ui) {
        console.log("Start position: " + ui.item.startPos);
        console.log("New position: " + ui.item.index());
    }
});