Plugin per la selezione jQuery stile editor di testo?

Question

Quello che sto cercando di realizzare è quello di utilizzare jQuery per simulare il comportamento della funzionalità text-selezione che si vede in un tipico editor di testo, tranne che invece di selezionare il testo, voglio selezionare più file di <div>s. Tuttavia, finora gli unici plugins "selezione" che ho trovato per jQuery operano basano su un modello di lazo rettangolare. In particolare, sto usando il plugin selezionabile jQueryUI. Per vedere che cosa sto parlando, prendere in considerazione le 2 immagini seguenti:

default jQueryUI "selezionabile" il comportamento plug-in

comportamento plug-Ideal (sans il lazo) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

Si può anche andare qui per giocare con questo esempio esatto. Qualcuno sa di un plugin che realizza questo? Questo mi farebbe risparmiare da procedere di hack o hack intorno a questo plugin per ottenere ciò che voglio ...

P / S: Nel mio app ogni riga conterrà fino a 150 o giù di lì div, e ogni div avrà un paio di div all'interno di esso. Ho cercato il mio selezionabile per arrotolare sigarette ma era lento anche quando si tratta di solo una singola linea. Attualmente sto usando questo plugin perché la sua molto più performante di quello che ho scritto.

Answer 1

Forse già ottenuto il vostro proprio script per questo, ma ho ottimizzato e la mia migliorato molto. Si aggiunge o rimuove le classi solo quando necessario, che è grande per le prestazioni.

Inoltre ha ottenuto alcuni metodi che possono essere utili:

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

fare un tentativo , il codice è availabe anche .

Answer 2

Forse questo potrebbe essere ottimizzato in qualche modo, eppure ho provato solo in Chrome, ma penso che funzionerà in altri browser troppo. Non c'è bisogno di jQuery UI per questo, è fatta 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});
});

Ho un esempio in linea . Si noti che gli elementi non hanno un colore di sfondo nella scelta; Credo che questo darà una migliore performance.

---

UPDATE - Esempio 2

ho aggiornato così la selezione è visibile durante la selezione:

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

Ancora una volta, forse questo codice potrebbe essere ottimizzato in qualche modo per le prestazioni.

Answer 3

Vorrei fare una mia versione utilizzando le funzionalità di jQuery.

Prima di tutto, l'interfaccia l'evento per "arresto:" (forse come serializzare http: // jqueryui.com/demos/selectable/#serialize )

Dai un'occhiata a cui identità del mio ritorno, più basso e più alto sarebbe darmi abbastanza per un semplice "per il ... prossimo" loop attraverso i rimanenti oggetti.

So che è un / trucco soluzione di fix, ma che sembra risolvere il problema dal mio punto di vista, è vero utile per voi o avete bisogno il codice troppo? Volevo solo di fornire con il pensiero algoritmic prima. : O)