Jquery 컨트롤을 사용하지 않고 선택 가능

Question

나는 Jquery Selectable을 사용합니다. 그러나 사용자는 컨트롤 버튼을 누르고 있지 않아도 여러 항목을 선택할 수있는 어쨌든 항목을 선택하기 위해 컨트롤 버튼을 누르고 있어야합니까?

다른 말로하면 : 사용자가 항목을 클릭하고 다시 클릭하여 선택을 취소 할 수있게하려고합니다.

Answer 1

사용자가 요소를 클릭 할 때 "selected"클래스를 추가하고 다시 클릭하면 클래스를 제거 할 수 있습니다.

$(".selectable").click(function(e) { 
    $(this).toggleClass("selected"); 
}); 

Answer 2

마우스 왼쪽 버튼을 사용하여 여러 항목을 선택할 수도 있습니다. 단, 인접 항목 만 선택할 수 있습니다.

Answer 3

가장 쉬운 것은 당신의 선택 요소에 selected 클래스를 바꾸는 jQuery를 클릭 핸들러를 구현하는 것입니다. 그런 다음 적절하게 selected으로 스타일을 지정하십시오. jQuery Selectable은 귀하의 경우보다 도움이되는 방해물입니다.

Answer 4

사용자 지정 이벤트 처리기 집합을 사용하여 선택 및 선택 취소 동작을 제어 할 수 있습니다. 이 핸들러 세트를 사용하면 선택하지 않고 범위 선택을 수행하지 않고 다시 클릭하지 않으면 아무 것도 선택 해제되지 않습니다. if (event.detail == 0) { 및 관련 문을 제거하면 범위 선택이 범위 반전과 같이 작동합니다. 선택한 범위의 항목은 선택 취소되며 그 반대의 경우도 마찬가지입니다.

var _selectRange = false, _deselectQueue = []; 
$(function() { 
    $("#selectable").selectable({ 
     selecting: function (event, ui) { 
      if (event.detail == 0) { 
       _selectRange = true; 
       return true; 
      } 
      if ($(ui.selecting).hasClass('ui-selected')) { 
       _deselectQueue.push(ui.selecting); 
      } 
     }, 
     unselecting: function (event, ui) { 
      $(ui.unselecting).addClass('ui-selected'); 
     }, 
     stop: function() { 
      if (!_selectRange) { 
       $.each(_deselectQueue, function (ix, de) { 
        $(de) 
         .removeClass('ui-selecting') 
         .removeClass('ui-selected'); 
       }); 
      } 
      _selectRange = false; 
      _deselectQueue = []; 
     } 
    }); 
}); 

While it lasts, here's a jsfiddle example.