jQuery-UI selectable 에서 멀티셀렉트 기본설정 && toggle 모드 사용하기

발단은 이러함.

24 X 7 정도의 테이블에서 드래그를 통해 다중선택을 구현하려는데,

다시 드래그만 했다 하면 선택이 초기화 됨.

문제 1. 다중선택을 하려면 ctrl 키를 누른채로 드래그 or 클릭해야 함.

문제 2. 선택된 영역을 다시 드래그 해도 선택이 해제되지 않음.

먼저 다중선택 기본옵션은 jquery-ui 코어를 수정함.

options: {appendTo: "body", autoRefresh: true, distance: 0, filter: "*", tolerance: "touch"}

의 끝에 하나를 추가해서,

options: {appendTo: "body", autoRefresh: true, distance: 0, filter: "*", tolerance: "touch", multiSelect : true}

이렇게 변경.

_mouseStart: function(c) {  아래로 내려가다 보면,

if(!c.metaKey) { 부분이 있는데, ctrl을 누르고 있으면 멀티셀렉트를 가능하게 해주는 부분.

이부분을 이렇게 변경함.

if (!f.options.multiSelect && !c.metaKey) {

출처 : 셀프 노가다

selectable()을 호출할때 아래와 같이 호출함.

$(function() {

$("#selectable").selectable({

selected: function (event, ui) {

if ($(ui.selected).hasClass('selectedfilter')) {

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

// do unselected stuff

} else {

$(ui.selected).addClass('selectedfilter').addClass('ui-selected');

// do selected stuff

}

}

});

});

출처 : 

http://stackoverflow.com/questions/3946462/jquery-ui-selectable-unselect-selected-item-on-click