JqueryUI Wählbar - Abwahl ohne Strg

Question

Ich versuche, eine auswählbare Liste mit Eltern/Kind/Enkel Einkerbungen zu machen. siehe unten:

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'); 
     }    
    } 
}); 

Aber, ich bin eine Menge Probleme, die kommt mit der „abzuwählen“ Funktionalität (das heißt ohne Presse mit Strg-Taste gedrückt). Ich möchte auch nicht automatisch "Strg" mit der Maus "binden" (was in einigen anderen Lösungen beschrieben wird), b/c Ich möchte nur ein Element auf einmal ausgewählt. Außerdem möchte ich nur verstehen, wie der Kontrollfluss durch die Ereignisse deaktiviert wird (z. B. "ausgewählt:").

Was mache ich hier falsch? Wie Sie sehen, wird die Auswahl korrekt aufgenommen, da das Textfeld korrekt mit dem richtigen Text aktualisiert wird. Wenn ich jedoch auf ein bereits angeklicktes Element klicke, um die Auswahl aufzuheben (ohne die Strg-Taste gedrückt zu halten), wird die Auswahl nicht aufgehoben. Ich denke, selbst in dieser Situation wird ein "ausgewähltes" Ereignis ausgelöst - aber eindeutig ist etwas falsch mit meinem Code "ausgewählt:". Sehr frustrierend ..

Danke an alle.

Answer 1

Also habe ich mit ihm ein bisschen mehr getüftelt, und fand, was ich brauchte. Siehe unten. Debug-Text hinzugefügt, falls dies später für jemanden hilfreich sein könnte. Ich werde einen anderen Thread für meine "Seitenfrage" bezüglich der Einrückung erstellen. Danke an alle.

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

Versuchen

// 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

ist hier Mine:

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

Sie können/abzuwählen ohne Ctrl drücken wählen ziehen.

Wenn Sie bei Auswahl/Abwahl alle zuvor ausgewählten Elemente ausgewählt haben, wählen Sie diese Aktion als Nichtauswahl aus. Wenn zuvor mehrere ausgewählt wurden, legen Sie diese Aktion als Auswahl fest.