JQuery UI - Sortable add on update class
I am using jqueries UI sortable plugin with 2 linked lists. I am trying to get a sortable to add a specific class to the li when it drops to specific uls. So depending on the ul it goes to, I want it to remove the old class and add a new class that will depend on the ul. For example: I have a complete list and an archived list. I want it to change classes when going from complete to archive and vice versa. I did some research and found:
receive: function(event, ui) { //Element ready to be dropped to new place
source_element = $(ui.item); // here is your selected item
}
Which I think is giving me the element that just moved, but I'm not sure how to find out what it is now and where it came from. Any help would be great, thanks!
source to share
The code below should do what you want. I borrowed the HTML layout from the jquery site and then added in the functions you need. Several steps are required for it to work.
- I have connected two columns using the option
connectWith
. - I added some code that listens
sortreceive()
that only fires when the li is moved from one column to another. I am setting a variable so that I can tell whensortstop()
triggered whether I am in a new column or not. - Then depending on which column I came from, I remove the original class and add the class of the new column.
<style type="text/css">
#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
.ui-state-default { background-color: #ccc;}
.ui-state-highlight { background-color: #fff;}
</style>
<script type="text/javascript">
var list;
$(function() {
$('#sortable1').sortable({
connectWith: '#sortable2'
}).disableSelection();
$('#sortable2').sortable({
connectWith: '#sortable1'
}).disableSelection();
$('#sortable1').bind('sortreceive', function(event, ui) {
list = "different";
});
$('#sortable2').bind('sortreceive', function(event, ui) {
list = "different";
});
$('#sortable2').bind('sortchange', function(event, ui) {
list = "same";
});
$('#sortable1').bind('sortchange', function(event, ui) {
list = "same";
});
$('#sortable1').bind('sortstop', function(event, ui) {
if(list == "different") {
$('#'+ui.item[0].id).removeClass("ui-state-default");
$('#'+ui.item[0].id).addClass("ui-state-highlight");
}
list = "";
});
$('#sortable2').bind('sortstop', function(event, ui) {
if(list == "different") {
$('#'+ui.item[0].id).removeClass("ui-state-highlight");
$('#'+ui.item[0].id).addClass("ui-state-default");
}
list = "";
});
});
</script>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li id="li1" class="ui-state-default">Item 1</li>
<li id="li2" class="ui-state-default">Item 2</li>
<li id="li3" class="ui-state-default">Item 3</li>
<li id="li4" class="ui-state-default">Item 4</li>
<li id="li5" class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li id="li6" class="ui-state-highlight">Item 6</li>
<li id="li7" class="ui-state-highlight">Item 7</li>
<li id="li8" class="ui-state-highlight">Item 8</li>
<li id="li9" class="ui-state-highlight">Item 9</li>
<li id="li10" class="ui-state-highlight">Item 10</li>
</ul>
</div>
code>
source to share
but it already exists using event.target!
$('#sortable1').sortable({connectWith: '#sortable2,#sortable3'}).disableSelection();
$("#sortable2,#sortable3").bind("sortreceive",function(event,ui){
// current item list (event.target)
// source item list (ui.sender)
})
Note. you can save a lot of time using firebug with console.log (event) and console.log (ui);)
source to share