jQuery UI 선택 가능, 상자 선택 대신 흐름 선택 가능

Question

jQuery UI의 Selectable과 비슷한 것을 사용하고 싶습니다. 하지만 그것은 드래그 된 사각형에 대해 엄격하게 작동하며, 텍스트 선택과 같은 플로우 레이아웃에서 작동하는 무언가가 필요합니다.

내가 대신 원하는 것은입니다 : 나는 Selectable "display as grid" demo에 가면

예를 들어

, "3", 드래그 클릭은 "6", 선택은 사각형의 모든 것을 선택하기 그것은 3에서 6까지의 모든 숫자를 선택하는 것입니다. (이 유형의 선택에는 의미가 없기 때문에 점선 사각형 역시 비활성화해야합니다.) 이렇게 (다시 3에서 6으로 드래그) :

선택 가능 항목은 드래그 중에 항목이 선택되거나 선택 해제 될 때 발생하는 이벤트가 있지만 해당 이벤트의 "어떤 항목이 선택되었습니다"목록을 변경하거나 사용자 정의 "어떻게 수행 할 것인지를 알 수있는 방법이 없습니다 어떤 항목을 선택해야하는지 말하니? " 연산.

픽셀 위치 대신 논리적 순서로 항목을 선택하려면 어떻게 선택합니까?

Answer 1

I는이

Jquery selectable for range selection (slider behaviour)

그리고 당신은 .ui-선택 헬퍼 당신의 CSS이 추가 도면 상자를 숨길 매우 유사하다 생각 { 가시성 : 숨겨진; }

Answer 2

이 솔루션에 대한 데모를 및 http://jsfiddle.net/snyuan/Yrgnv/입니다. 그냥 참조.

Answer 3

나는 그것이 도움이 될 것이라고 생각합니다!

var indices = []; 
$("#selectable").selectable({ 
    selecting: function(event, ui) { 
     indices.push($(ui.selecting).index()); 
     select(); 
    }, 
    unselecting: function(event, ui) { 
     var index = $(ui.unselecting).index(); 
     for(var i = 0; i < indices.length; i++) 
      if(indices[i] == index) 
       indices.splice(i, 1); 
     select(); 
    } 
}); 

function select() { 
    indices.sort(function(a,b){return a-b}); 
    var start = indices[0]; 
    var end = indices[indices.length - 1]; 
    $('#selectable li').removeClass('ui-selecting'); 
    $('#selectable li').filter(function() { 
     return $(this).index() >= start && $(this).index() <= end; 
    }).addClass('ui-selecting'); 
}