Frage

Was ich versuche zu erreichen ist jQuery zu imitieren das Verhalten der Text-Auswahl-Funktionalität in einem typischen Text-Editor sehen verwenden, außer, statt Text auszuwählen, mag ich mehrere Reihen von <div>s auszuwählen. Bisher ist jedoch die einzige „Auswahl“ plugins Ich habe für jQuery gefunden arbeitet auf einem rechteckigen Lasso-Modell. Insbesondere verwende ich das jQueryUI auswählbaren Plugin. Um zu sehen, was ich rede, sollten Sie die folgenden zwei Bilder:

Standard jQueryUI "wählbar" Plugin Verhalten

Ideal Plugin Verhalten (sans das lasso) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

Sie können auch gehen hier mit genau diesem Beispiel zu spielen. Weiß jemand, der ein Plugin, das dies erreicht? Das würde mich von Verfahren speichern zu hacken oder dieses Plugin Hack um zu bekommen, was ich will ...

P / S: In meiner App jede Zeile wird auf 150 oder so divs enthalten bis und jedes div wird ein paar divs in ihm haben. Ich habe meine eigenen wählbare Hand rollen versucht, aber es war langsam, selbst wenn sie mit nur einer einzigen Zeile zu tun. Ich bin derzeit mit diesem Plugin, weil seine viel performanter als das, was ich geschrieben habe.

War es hilfreich?

Lösung

Vielleicht haben Sie bereits Ihr eigenes Skript für diese, aber ich optimiert und verbessert Mine viel. Sie fügt hinzu oder entfernt Klassen nur bei Bedarf, die für die Leistung groß ist.

Auch habe es einige Methoden, die nützlich sein können:

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

es versuchen , Code auch availabe .

Andere Tipps

Vielleicht könnte dies irgendwie optimiert werden und doch habe ich es in Chrome nur getestet, aber ich denke, es wird auch in anderen Browsern. Es besteht keine Notwendigkeit von jQuery UI für diese, es Hand gemacht;)

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

Ich habe ein Beispiel Online . Beachten Sie, dass Elemente haben keine Hintergrundfarbe bei der Auswahl; Ich denke, das wird eine bessere Leistung.


UPDATE - Beispiel 2

ich es aktualisiert, so dass die Auswahl während der Auswahl sichtbar ist:

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

Auch hier vielleicht dieser Code optimiert irgendwie für die Leistung werden könnte.

Ich würde meine eigene Version mit dem jQuery Funktionen machen.

Zu allererst Schnittstelle wird die Veranstaltung für "Stop" (vielleicht wie serialize http: // jqueryui.com/demos/selectable/#serialize )

Dann haben Sie einen Blick auf dem IDs ich zurückkam, niedrigsten und höchsten würde mich für eine einfache geben genug „für ... next“ Schleife durch die restlichen Objekte.

ich weiß, es ist ein fix / Hack Lösung, aber das scheint das Problem aus meiner Sicht zu lösen, ist es für Sie usefull oder benötigen Sie den Code auch? Ich wollte nur zuerst mit dem algoritmic Gedanken schaffen. : O)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top