jQuery 텍스트 편집기 스타일 선택을위한 플러그인?

Question

내가 얻으려고하는 것은 일반적인 텍스트 편집기에서 볼 수있는 텍스트 선택 기능의 동작을 모방하기 위해 jQuery를 사용하는 것입니다. 단, 텍스트를 선택하는 대신 <div>의 여러 행을 선택하고 싶습니다. 그러나 지금까지 jQuery에서 발견 한 유일한 "선택"플러그인은 직사각형 올가미 모델을 기반으로 작동합니다. 특히 jQueryUI 선택 가능한 플러그인을 사용하고 있습니다.

기본 jQueryUI "선택"플러그인 동작 http://img685.imageshack.us/img685/2344/selectabledefaultthumb.png

이상적인 플러그인 동작 (산세 올가미) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

: 내가 무슨 말을 확인하려면 다음 두 이미지를 고려 이 정확한 예제로 재생하려면 here으로 이동할 수도 있습니다. 아무도 이것을 달성하는 플러그인을 알고 있습니까? 그게 내가 원하는 걸 얻기 위해 해킹하거나 해킹이 플러그인을 해킹에서 저축을 것입니다 ...

P/S : 내 애플 리케이션에서 각 행은 150 개 정도의 div가 포함되며, 각 div는 몇 가지 있습니다 그 안에서 divs. 나는 스스로 선택할 수있는 것을 손으로 굴리기를 시도했지만 단 한 줄만 다루더라도 느렸다. 나는이 플러그인을 사용하고 있는데, 필자가 작성한 것보다 훨씬 성능이 좋기 때문이다.

Answer 1

어쩌면 이미 자신 만의 스크립트를 가지고 있을지 모르지만 최적화되고 개선되었습니다. 필요한 경우에만 클래스를 추가하거나 제거하므로 성능이 우수합니다.

이

var sR = $('#selectable').selectableRange({ 
    /* Alternatively, you could overwrite default options 
    classname: 'active', 
    log: false, 
    logElement: $('#log'), 
    nodename: 'LI'*/ 
}); 

// Initialize the selectable so it works 
sR.init(); 

// You can always change options like this: 
$('#logOnOff').click(function(){ 
    // Toggle log 
    sR.options.log = (sR.options.log) ? false : true; 
}); 

// Also you can use this methods: 
// sR.deselect() 
// sR.destroy() 
// sR.getSelectedItems() 

Give it a try, 코드 also availabe입니다 :

또한 유용 할 수있는 몇 가지 방법을 얻었다.

Answer 2

어쩌면이 방법을 사용하여 최적화 할 수 있을지 모르지만 크롬에서만 테스트 한 적이 있지만 다른 브라우저에서도 제대로 작동 할 것입니다. 나는 example online있어)

$(function() { 
    var selectableLi = $('#selectable li'); 
    selectableLi.mousedown(function(){ 
     var startIndex, endIndex, mouseUpOnLi = false; 

     // When dragging starts, remove classes active and hover 
     selectableLi.removeClass('active hover'); 

     // Give the element where dragging starts a class 
     $(this).addClass('active'); 

     // Save the start index 
     startIndex = $(this).index(); 

     // Bind mouse up event 
     selectableLi.bind('mouseup', function(){ 

      // Mouse up is on a li-element 
      mouseUpOnLi = true; 
      $(this).addClass('active'); 

      // Remove the events for mouseup, mouseover and mouseout 
      selectableLi.unbind('mouseup mouseover mouseout'); 

      // Store the end index 
      endIndex = $(this).index(); 

      // Swap values if endIndex < startindex 
      if(endIndex < startIndex){ 
       var tmp = startIndex; 
       startIndex = endIndex; 
       endIndex = tmp;     
      } 

      // Give the selected elements a colour 
      for(i=startIndex; i<=endIndex; i++){ 
       $(selectableLi[i]).addClass('active'); 
      } 

     }).bind('mouseover', function(){ 
      // Give elements a hover class when hovering 
      $(this).addClass('hover'); 
     }).bind('mouseout', function(){ 
      // Remove the hover class when mouse moves out the li 
      $(this).removeClass('hover'); 
     }); 

     $(document).bind('mouseup', function(e){ 
      // When mouse up is outside a li-element 
      if(!mouseUpOnLi){ 
       selectableLi.removeClass('active'); 
      } 
      $(this).unbind('mouseup'); 
     }); 
    }).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false}); 
}); 

, 이것에 대한 jQuery를 UI의 필요는 손으로 만든입니다 없다. 항목을 선택하면 배경색이 없습니다. 나는 이것이 더 나은 성능을 줄 것이라고 생각한다.

---

UPDATE - 선택하는 동안 선택이 볼 수 있도록 내가 그것을 업데이트 Example 2

:

var selectableLi; 

function colourSelected(a, b, Class){ 
    selectableLi.removeClass(Class); 
    // Swap values if a > b 
    if(a > b){ 
     var tmp = a; 
     a = b; 
     b = tmp;      
    } 

    // Give the selected elements a colour 
    for(i=a; i<=b; i++){ 
     $(selectableLi[i]).addClass(Class); 
    }  
} 

$(function() { 
    selectableLi = $('#selectable li'); 
    selectableLi.mousedown(function(){ 
     var startIndex, endIndex, mouseUpOnLi = false; 

     // When dragging starts, remove classes active and hover 
     selectableLi.removeClass('active hover'); 

     // Give the element where dragging starts a class 
     $(this).addClass('active'); 

     // Save the start index 
     startIndex = $(this).index(); 

     // Bind mouse up event 
     selectableLi.bind('mouseup', function(){ 

      // Mouse up is on a li-element 
      mouseUpOnLi = true; 
      $(this).addClass('active'); 

      // Remove the events for mouseup, mouseover and mouseout 
      selectableLi.unbind('mouseup mouseover mouseout'); 

      colourSelected(startIndex, $(this).index(), 'active'); 

     }).bind('mouseover mouseout', function(){ 
      // Give elements a hover class when hovering 
      colourSelected(startIndex, $(this).index(), 'hover'); 
     }); 

     $(document).bind('mouseup', function(e){ 
      // When mouse up is outside a li-element 
      if(!mouseUpOnLi){ 
       selectableLi.removeClass('active hover'); 
      } 
      $(this).unbind('mouseup'); 
      selectableLi.unbind('mouseover mouseout'); 
     }); 
    }).attr("unselectable","on").css("MozUserSelect","none").bind("selectstart",function(){return false}); 
}); 

다시 말하지만, 어쩌면이 코드는 성능을 위해 어떻게 든 최적화 할 수 있습니다.

Answer 3

jQuery 기능을 사용하여 내 버전을 만들 수 있습니다. 모든

먼저,의 이벤트 인터페이스 "정지"(아마도 http://jqueryui.com/demos/selectable/#serialize를 직렬화 좋아)

그럼 내가 돌아 왔을 된 ID 년대에서 봐, 최저 및 최고를위한 "간단한 충분히 저를 줄 것이다. ..next "나머지 객체를 반복합니다.

나는 그것의 수정/해킹 해결책을 알고 있지만 그것은 내 관점에서 문제를 해결하는 것으로 보입니다. 그것은 당신에게 유익한 것이거나 코드가 필요한 것입니까? 단지 알고리즘 적 사고를 먼저 제공하고 싶었습니다. : o)