jQuery addClass example

Change class name on click in jQuery

HTML

<div>Sortable List 1
    <ul class="sortableList">
        <li id="1" class="ui-state-default large-box">Item 1</li>
        <li id="2" class="ui-state-default large-box">Item 2</li>
        <li id="3"class="ui-state-default large-box">Item 3</li>
        <li id="4" class="ui-state-default large-box">Item 4</li>
        <li id="5" class="ui-state-default large-box">Item 5</li>
    </ul>
</div>

CSS

.large-box
{
  height:100px;
}

.small-box
{
  height:30px !important;
}
.yellow { background:yellow; }

JavaScript

$(document).ready(function () {
    $(".sortableList").sortable({
        revert: true,
        placeholder: 'sortable-placeholder',
        /*update: function (event, ui) {
            // Some code to prevent duplicates
        }*/
        
        start: function( event, ui ) { 
 /*         $(ui.item).removeClass("large-box"); */
      $(ui.item).addClass("small-box");
    },
    stop:function( event, ui ) { 
/*      $(ui.item).addClass("large-box"); */
      $(ui.item).removeClass("small-box");

    }
    });
});