JqueryUI selezionabile - deseleziona senza Ctrl

Question

Sto provando a creare un elenco selezionabile con rientri parent/child/grandchild. Si prega di vedere di seguito:

http://jsfiddle.net/Lmsop4k7/

$('#theParentList').selectable({ 
    filter: 'li div', 
    selected: function (event, ui) { 
     var selectedText = $(ui.selected).text(); 
     $("#selectedNode").text(selectedText); 

     if ($(ui.selected).hasClass('selectedfilter')) { 
      $(ui.selected).removeClass('selectedfilter'); 
     }    
    } 
}); 

Ma, io sto avendo un sacco di problemi a venire con la funzionalità "deselezionare" (vale a dire senza dover premere Ctrl). Inoltre, non desidero "associare" Ctrl automaticamente al mouse verso il basso (che è descritto in alcune altre soluzioni), b/c Voglio solo un elemento selezionato contemporaneamente. Inoltre, voglio solo capire come fare il flusso di controllo per deselezionare attraverso gli eventi (ad esempio "selezionato:").

Cosa sto facendo di sbagliato qui? Come puoi vedere, la selezione viene rilevata correttamente poiché la casella di testo viene aggiornata correttamente con il testo corretto. Tuttavia, quando faccio clic su un elemento già selezionato per "deselezionare" (senza tenere premuto Ctrl), non deseleziona. Immagino che anche in questa situazione, venga attivato un evento "selezionato", ma chiaramente c'è qualcosa di sbagliato nel mio codice "selezionato:". Molto frustrante ..

Grazie a tutti.

Answer 1

Così ho giocherellava con un po 'di più, e hanno trovato quello che mi serviva. Vedi sotto. Aggiunto il testo di debug, nel caso in cui possa essere utile a qualcuno in seguito. Creerò un thread diverso per la mia "domanda secondaria" relativa all'indentazione. Grazie a tutti.

http://jsfiddle.net/bgfn3091/2/

$('#theParentList').selectable({ 
     filter: 'li div', 
     selected: function (event, ui) { 
      var selectedText = $(ui.selected).text(); 
      $("#selectedNode").text(selectedText); 

      $(ui.selected).removeClass('ui.selected'); 

      $("#debugText").text("Selected");    

      if ($(ui.selected).hasClass('alreadySelected')) { // clicking to de-select 
       $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
       $(ui.selected).removeClass('ui-selected'); 

       $("#debugText").text("alreadySelected is present and removed");         
      } 
      else // clicking to select 
      { 
       $('#theParentList .alreadySelected').removeClass('alreadySelected'); 
       $(ui.selected).addClass('alreadySelected'); // add to just this element 

       $("#debugText").text("alreadySelected added");              
      } 
     } 
    }); 

Answer 2

Prova

// utilize `dblclick` event to remove selected class 
$(".ui-selected").one("dblclick", function(e) { 
    $(e.target).removeClass("ui-selected") 
}); 

http://jsfiddle.net/Lmsop4k7/3/

Answer 3

Qui è mio:

http://jsfiddle.net/carlcarl/Lmsop4k7/4/

È possibile trascinare selezionare/deselezionare senza stampa Ctrl.

Nella selezione/deselezione, se tutti i selezionati sono stati selezionati in precedenza, impostare questa azione come deselezionata. Se più di uno non è stato selezionato in precedenza, impostare questa azione come selezione.