Demo of Selectable all events using JQuery UI

« Tutorial Selectable

<ul id="my_selectable">
  <li id=i1 data-group='group1'>Item 1</li>
  <li id=i2 data-group='group2'>Item 2</li>
  <li id=i3 data-group='group3'>Item 3</li>
  <li id=i4 data-group='group4'>Item 4</li>
  <li id=i5 data-group='group5'>Item 5</li>
</ul>
<p class='bg-warning text-dark hdd'> Events List </p> 
<span id=d1_unselected class=my_class></span><br>
<span id=d1_unselecting class=my_class></span><br>
<span id=d1_start class=my_class></span><br>
<span id=d1_stop class=my_class></span><br>
<span id=d1_selected class=my_class></span><br>
<span id=d1_selecting class=my_class></span><br>

JQuery

$(document).ready(function() {
/////////////
$( "#my_selectable" ).selectable({
  selected: function() {
	$('#d1_selected').html(" selected event triggered");
	my_function();
	},  
  selecting: function() {
	$('#d1_selecting').html(" selecting event triggered");
	my_function();
	},
 start: function() {
	$('#d1_start').html(" start  event triggered");
	my_function();
	},
  stop: function() {
	$('#d1_stop').html(" stop event triggered");
	my_function();
	},
 unselected: function() {
	$('#d1_unselected').html(" unselected event triggered");
	my_function();
	},
 unselecting: function() {
	$('#d1_unselecting').html(" unselecting event triggered");
	my_function();
	}
});
/////////
my_function=function my_function(){
$('.my_class').show();
setTimeout(function() { $(".my_class").fadeOut('slow'); }, 1000);	
}
//////
})