Plugin para seleccionar el estilo de texto-editor de jQuery?

Question

Lo que estoy tratando de lograr es utilizar jQuery para imitar el comportamiento de la funcionalidad de selección de texto que aparece en un editor de texto normal, pero en lugar de seleccionar texto, deseo seleccionar múltiples filas de <div>s. Sin embargo, hasta ahora los únicos plugins "selección" que he encontrado para jQuery funcionan basado en un modelo de lazo rectangular. En particular, estoy usando el plugin seleccionable jQueryUI. Para ver lo que estoy hablando, tenga en cuenta las siguientes 2 imágenes:

Por defecto jQueryUI "seleccionable" el comportamiento del plugin

Ideal plugins de comportamientos (sans el lazo) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

También puede ir aquí jugar con este ejemplo exacta. ¿Alguien sabe de un plugin que logra esto? Eso me salvará de proceder a cortar o cortar alrededor de este plugin para conseguir lo que quiero ...

P / S: En mi aplicación cada fila contendrá hasta 150 o menos divs, y cada div tendrá unos divs dentro de ella. He probado mi propia seleccionable para liar pero era lento incluso cuando se trata de una única línea. Actualmente estoy usando este plugin porque su mucho más performante que lo que he escrito.

Answer 1

Tal vez usted ya tiene su propio guión para esto, pero optimizado y la mía mejorado mucho. Añade o sólo cuando sea necesario Elimina las clases, que es ideal para el rendimiento.

También tiene algunos métodos que pueden ser útiles:

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

darle una oportunidad , el código es también availabe .

Answer 2

Tal vez esto podría ser optimizado de alguna manera y sin embargo, yo lo he probado sólo en Chrome, pero creo que va a funcionar en otros navegadores también. No hay necesidad de jQuery UI para esto, de hecho a mano;)

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

Tengo un ejemplo línea . Tenga en cuenta que los elementos no tienen un color de fondo en la selección; Creo que esto le dará un mejor rendimiento.

---

ACTUALIZACIÓN - Ejemplo 2

Me lo actualizó por lo que la selección es visible mientras que la selección:

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

Una vez más, tal vez este código podría ser optimizado para un rendimiento de alguna manera.

Answer 3

Me gustaría hacer mi propia versión cuenta con el uso de jQuery.

En primer lugar, la interfaz del evento de "parada" (tal vez como serializar http: // jqueryui.com/demos/selectable/#serialize )

A continuación, echar un vistazo a lo que de Identificación regresé, bajo y más alto me daría suficiente para un simple "para la próxima ..." bucle a través de los objetos restantes.

Sé que su solución una solución / corte, pero que parece resolver el problema desde mi punto de vista, es muy útil para usted o necesita el código también? Sólo quería dar con la idea algoritmic primero. : O)