JqueryUI चयन योग्य - Ctrl

Question

के बिना अचयनित करना मैं माता-पिता/बच्चे/पोते के इंडेंटेशन के साथ चयन करने योग्य सूची बनाने की कोशिश कर रहा हूं। कृपया नीचे देखें:

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

लेकिन, मुझे समस्याओं का एक बहुत "का चयन रद्द करें" कार्यक्षमता के साथ आ कर रहा हूँ (अर्थात Ctrl और प्रेस आवश्यकता नहीं होती)। मैं (जिसे कुछ अन्य समाधानों में वर्णित किया गया है) नीचे माउस को स्वचालित रूप से "बाध्य" करना नहीं चाहता, बी/सी मैं केवल एक ही समय में एक आइटम चुनना चाहता हूं। साथ ही, मैं समझना चाहता हूं कि ईवेंट के माध्यम से अचयनित करने के लिए नियंत्रण प्रवाह कैसे करें (उदा। "चयनित:")।

मैं यहाँ क्या गलत कर रहा हूं? जैसा कि आप देख सकते हैं, चयन सही ढंग से उठाया जाता है क्योंकि टेक्स्टबॉक्स सही टेक्स्ट के साथ सही तरीके से अपडेट हो जाता है। हालांकि, जब मैं पहले से क्लिक किए गए आइटम को "अचयनित" (Ctrl दबाए बिना) पर क्लिक करता हूं, तो यह अचयनित नहीं होता है। मुझे इस स्थिति में भी लगता है, एक "चयनित" घटना ट्रिगर हो जाती है - लेकिन स्पष्ट रूप से मेरे "चयनित:" कोड में कुछ गड़बड़ है। बहुत निराशाजनक ..

सभी को धन्यवाद।

Answer 1

तो मैं इसके साथ थोड़ा अधिक fiddled, और पाया कि मैं क्या जरूरत है की कोशिश करो। कृपया नीचे देखे। डीबग टेक्स्ट जोड़ा गया, अगर किसी के बाद में मददगार हो सकता है। मैं इंडेंटेशन के संबंध में अपने "साइड प्रश्न" के लिए एक अलग धागा तैयार करूंगा। सबको धन्यवाद।

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

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

यहाँ मेरा है:

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

आप प्रेस Ctrl बिना चयन/अचयनित खींच सकते हैं।

चयन/चयन में, यदि आपके द्वारा चुने गए सभी को पहले चुना गया है, तो इस क्रिया को अचयनित के रूप में सेट करें। यदि पहले से अधिक का चयन नहीं किया गया है, तो इस क्रिया को चयन के रूप में सेट करें।