jQuery插件文本编辑器样式的选择？

Question

我试图做到的，是使用jQuery的你在一个典型的文本编辑器中看到的文本选择功能模仿的行为，除了没有选择文本，我想选择<div>s的多行。然而，到目前为止，我已经找到了jQuery的唯一的“选择”插件运作的基础上矩形套索模型。特别是，我使用jQueryUI的可选插件。看什么我谈论，考虑以下2个图像：

默认jQueryUI的 “可选择” 插件行为

<强>理想插件行为（没有套索） http://img709.imageshack.us/img709/5664/selectableidealthumb.png

您也可以去这里这个确切的例子来打。这是否实现了这个插件的有人知道吗？这将节省我从程序到黑客或黑客解决这个插件来得到我想要的......

P / S：在我的应用程序的每一行都将含有多达150个左右的div，并且每个DIV将具有在其内的几个的div。我曾尝试手卷我自己的选择，但只是一个单一的线打交道时，它是缓慢均匀。我目前使用这个插件，因为它的很多比我写的更好的性能。

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()

<强> 试试看 下，代码是的 也速效

Answer 2

也许这可以在某种程度上优化，我却只能在Chrome的测试，但我认为它会在其他浏览器工作了。没有为这种需要jQuery的用户界面的，它的手作出;）

$(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});
});

我有一个 例如在线 。请注意，选择项目时没有背景色;我认为这将提供更好的性能。

---

<强> UPDATE - 实施例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我回来后，最高和最低会给我足够简单“为...下一步”循环遍历剩余对象。

我知道它的修复程序/黑客的解决方案，但似乎从我的角度解决问题，它是有用的，你还是你需要的代码吗？只是想先用algoritmic思想提供。 ：O）