Question

I’m using jqueryUI to drag/drop list items from one list to another sortable list. Is there anyway I can change the class of the dropped item from ‘sortedli’ to ‘droppedli’ when it is dropped from all-colls-list into the sortable list coll-selected-list and vice versa? Currently when I drop it, it retains the original class name.

$(function() {
    var lists = [{"listid":"#all-colls-list", "connectid":"#coll-selected-list", "drop":true},
     {"listid":"#coll-selected-list", "connectid":"#all-colls-list", "drop":true}];

    $.each(lists, function(i, list) {
        $(list.listid).sortable({
            connectWith: list.connectid,
            dropOnEmpty: list.drop
        });
    });
});

<ul id="all-colls-list" class="droptrue ui-sortable">
                <li class="sortedli">ahsbah</li>
                <li class="sortedli">bachs</li>
                <li class="sortedli">stah</li>
</ul>


<ul id="coll-selected-list" class="droptrue ui-sortable">
              <li class="sortedli" style="">blah</li>
              <li class="sortedli" style="">blah</li>
              <li class="sortedli" style="">blah</li>
</ul>

Answer 1

Here is complete solution for changing class when on drag and drop events occurred using jQuery UI.

HTML:

<ul id="all-colls-list" class="droptrue ui-sortable">
  <li class="sortedli">
      ahsbah
  </li>
  <li class="sortedli">
      bachs
  </li>
  <li class="sortedli">
      stah
  </li>
</ul>

<ul id="coll-selected-list" class="droptrue ui-sortable">
  <li class="sortedli" style="">
      blah
  </li>
  <li class="sortedli" style=""> 
      blah
  </li>
  <li class="sortedli" style="">
      blah
  </li>
</ul>

CSS:

#all-colls-list{
   display:inline-block;
   width:200px;
   border:1px solid #331299;
   background-color:#1177a8;
   height:auto;
}

#coll-selected-list{
   display:inline-block;
   width:200px;
   border:1px solid #331299;
   background-color:#a14466;
   height:auto;
}
#all-colls-list li, #coll-selected-list li{
   list-style:none;
}
#all-colls-list li:hover, #coll-selected-list li:hover{
   cursor:move;
   border:2px solid #A1B177;
}

.dropped{
   background-color:#2277a7;
}
.sorted{
   background-color:#a74455;
}

JQuery:

var lists = [{
              "listid": "#all-colls-list",
              "connectid": "#coll-selected-list"
            }, {
              "listid": "#coll-selected-list",
              "connectid": "#all-colls-list"
           }];
  //Apply Sort on each list
  $.each(lists, function(i, list) {
          $(list.listid).sortable({
             connectWith: list.connectid,
             opacity: 0.7,
             start: function(event, ui) {
                 if ($(ui.item).parents('#all-colls-list').length > 0) {
                      $(ui.item).addClass('dropped');
                 } else {
                      $(ui.item).addClass('sorted');
                 }
             },
            stop: function(event, ui) {
               if ($(ui.item).parents('#all-colls-list').length > 0) {
                    $(ui.item).switchClass('droppedli', 'sortedli');
               } else {
                    $(ui.item).switchClass('sortedli', 'droppedli');
               }
               $(ui.item).removeClass('sorted');
               $(ui.item).removeClass('dropped');
            }
       });

 });

Note: Please note that before run above script, we have to include either full or min versions of latest jquery.js and latest jQuery UI java script files.

I have created a bin with the solution on http://codebins.com/codes/home/4ldqpc3