Pergunta

O que estou tentando alcançar é usar o jQuery para imitar o comportamento da funcionalidade de seleção de texto que você vê em um editor de texto típico, exceto em vez de selecionar texto, quero selecionar várias linhas de <div>s. No entanto, até agora os únicos plugins de "seleção" que encontrei para o jQuery operar com base em um modelo retangular LASSO. Em particular, estou usando o plug -in selecionável JQueryui. Para ver do que estou falando, considere as 2 imagens a seguir:

JQueryui "selecionável" do comportamento do plug -in

Comportamento ideal para plug -in (sem o laço) http://img709.imageshack.us/img709/5664/selectableidealthumb.png

Você também pode ir aqui Para brincar com este exemplo exato. Alguém conhece um plugin que alcança isso? Isso me salvaria de proceder a hackear ou invadir este plugin para obter o que eu quero ...

P/S: No meu aplicativo, cada linha conterá até 150 ou mais divs, e cada div terá alguns divs dentro dela. Eu tentei rolando à mão meu próprio selecionável, mas foi lento, mesmo ao lidar com apenas uma única linha. Atualmente, estou usando este plugin porque é muito mais performante do que o que escrevi.

Foi útil?

Solução

Você tem que fazer as coisas do DNS que você pulou no passo 3!É o passo em que você fornece o domínio do aplicativo Um registro de pesquisa no DNS e, portanto, traduzir o nome do seu computador com um URL

Outras dicas

Talvez isso possa ser otimizado de alguma forma e, no entanto, eu o testei apenas no Chrome, mas acho que também funcionará em outros navegadores. Não há necessidade de interface do usuário jQuery para isso, é feita à mão;)

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

Eu tenho um exemplo online. Observe que os itens não têm uma cor de fundo ao selecionar; Eu acho que isso dará um desempenho melhor.


ATUALIZAR - Exemplo 2

Eu o atualizei para que a seleção seja visível ao selecionar:

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

Novamente, talvez esse código possa ser otimizado de alguma forma para o desempenho.

Eu faria minha própria versão usando os recursos jQuery.

Primeiro de tudo, interface o evento para "Stop" (talvez goste de serializar http://jqueryui.com/demos/selectable/#serialize)

Em seguida, dê uma olhada nos quais eu voltei, o mais baixo e o mais alto me daria o suficiente para um loop simples "para ... o próximo" através dos objetos restantes.

Eu sei que é uma solução de correção/hack, mas isso parece resolver o problema do meu ponto de vista, é útil para você ou você também precisa do código? Só queria fornecer o pensamento algoritmico primeiro. : o)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top