jquery change class when sortable

Question

//JavaScript 

$(function() {
  $( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable"
  }).disableSelection();
});

/*CSS*/

#sortable1, #sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}
#sortable1 li, #sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

<!--My HTML -->

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
</ul>

My question : When li element move from one ul to another ul at that time li contain class change.

exa. take li from first ul to move second ul at that time li class change ui-state-default to ui-state-highlight.

you can edit into js fiddle http://jsfiddle.net/fo51dggo/

Answer 1

You can use the stop event to handle class changes,

start: function (event, ui) {
        $currParent = ui.item.parent();
},
stop: function (event, ui) {
    if(!ui.item.parent().is($currParent)) ui.item.attr('class', ui.item.siblings().attr('class'))
}

Fiddle Demo

ui.item is the jQuery object representing the current dragged element.

---

Full code :

$(function () {
    var $currParent;
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        start: function (event, ui) {
            $currParent = ui.item.parent();
        },
        stop: function (event, ui) {
            if(!ui.item.parent().is($currParent)) ui.item.attr('class', ui.item.siblings().attr('class'))
        }
    }).disableSelection();
});

This would change ui-state-default to ui-state-highlight and vice-versa.

Answer 2

There is a stop method in sortable. change class there

stop event is triggered when sorting has stopped.

Try like this

$(function () {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        start: function (event, ui) {
            ui.item.data('parentID', ui.item.parent().attr("id"));
        },
        stop: function (event, ui) {
            var parentID = ui.item.data('parentID');
            if (ui.item.hasClass("ui-state-default")) {
                if (parentID !== ui.item.parent().attr("id")) {
                    ui.item.removeClass("ui-state-default");
                    ui.item.addClass("ui-state-highlight");
                }
            } else if (ui.item.hasClass("ui-state-highlight")) {
                if (parentID !== ui.item.parent().attr("id")) {
                    ui.item.removeClass("ui-state-highlight");
                    ui.item.addClass("ui-state-default");
                }
            }
            console.log(ui.item.parent().attr("id"));
        }
    }).disableSelection();
});

Fiddle

Answer 3

Use the function drop( event, ui ) that executes when you drop the droppable object. You can use:

ui.item.addClass("ui-state-highlight");

Inside the drop( event, ui ) function. More info at Droppable - Event Drop.