Selectable-events

Jquery JavaScript DHTML

            

  
  
  
  
  
  
  
  
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  
  
  $(function() {
        var selectableObj = {
          selected: function(e, ui) {
            $("#" + ui.selected.id).text("I have been selected!");
          },
          unselected: function(e, ui) {
            $("#" + ui.unselected.id).text("This div can be selected");
          },
          start: function(e) {
            alert("click to select");
          },
          stop: function() {
            $("#tip").fadeOut();  
          }
        }
      
        $("#selectables").selectable(selectableObj);
  });
  




  Item 1
  Item 2
  Item 3
  Item 4
  Item 5
  Item 6
  Item 7