Cancel elements
$(document).ready(function() {
//////////////////////////
$( '#my_selectable1' ).selectable();
$( '#my_selectable2' ).selectable({
stop: function() {
var selected=[]
$( "li.ui-selected", this ).each(function() {
selected.push( '#'+$(this).data('group'));
});
$( "#d2" ).html(selected.join(','))
$( "#my_selectable1" ).selectable( "option", "cancel", '' ); // reset all
$( "#my_selectable1" ).selectable( "option", "cancel", selected.join(',') );
}
});
////////////////
})
id="my_selectable1"
<ul id="my_selectable1" class=sel>
<li id=i1>Item 1</li>
<li id=i2>Item 2</li>
<li id=i3>Item 3</li>
<li id=i4>Item 4</li></a>
<li id=i5>Item 5</li>
</ul>
id="my_selectable2"
<ul id="my_selectable2" class=sel>
<li data-group=i1>Item 1</li>
<li data-group=i2>Item 2</li>
<li data-group=i3>Item 3</li>
<li data-group=i4>Item 4</li></a>
<li data-group=i5>Item 5</li>
</ul>