jQuery UI: erros classificáveis ??aninhadas

Question

Obrigado por leitura.

Duas questões:

Estou criando um tipo de lista de tarefas do sistema, que irá utilizar listas classificáveis ??aninhadas.

Aqui está um código muito básico de demonstração:

<script>
    $(function(){

        $('.sortable_test > li').attr('style', 'border:1px solid red; padding:3px; margin:2px;');

        $('.sortable_test').sortable({
            distance: 5,
            connectWith: ['.sortable_test'],
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true
        });
    })
</script>
<ul class='sortable_test'>

    <li>
        Item
        <ul class='sortable_test'>

            <li>
                Item

            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
        </ul>
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
</ul>

Questão 1:

Se você tentar arrastar um item do sub-lista aninhada, dentro dessa lista, ele funciona maravilhosamente. Mesmo se você tentar reordenar um item dentro da lista principal.

No entanto, se você quiser arrastar um item do sub-lista para a lista principal, ou vice-versa, isso pode ser feito, mas o espaço reservado não aparecerá imediatamente, ele vai tentar mantê-lo na mesma lista. Você tem que arrastá-la por todo o lugar, antes que ele irá registrar com a lista que são mais.

Por fim, ele parece perceber que você quer para entrar, ou fora de, uma sub-lista, mas é muito herky-espasmódico.

Eu estou pensando que talvez ele está confuso quanto ao que lista tem precedência, desde que você está arrastando, tecnicamente, sobre ambos.

Então, se você tentar arrastar um item da lista principal para uma sub-lista, ele vai considerar toda a sub-lista para ser um único item e tentar passar-lo como tal.

Alguém encontrou isso? Tem alguma idéia? Talvez haja uma maneira de especificar qual lista tem precedência, ou torná-lo mais óbvio para o plugin que lista que você está interessado?

Problema 2:

Se você pegar o primeiro item, o grande com a sub-lista, e tentar reorganizar-lo, às vezes ele vai tentar cair em seu próprio sub-lista, causa um erro, e desaparecer. I pode contornar este problema adicionando uma alça, e escondendo a sublista no punho clique (tornando-se um tamanho menor, o que resolve o problema), antes de arrastar começa, mas lata qualquer outra pessoa pensar em uma maneira de lidar com isso?

Parece que o problema é com arrastar um item com uma grande altura.

Navegadores:

Isso é tudo no Firefox. IE não parecem ser capazes de lidar com as sortables aninhados em tudo. Parece que não há maneira de agarrar um item de uma sub-lista.

Obrigado!

Answer 1

Verifique este bug: http://dev.jqueryui.com/ticket/4333

Answer 2

Estou tendo problemas semelhantes e eu também apresentou um erro de JQuery UI e postado aqui. Eu tenho uma demonstração onde eu usei um par de opções classificáveis ??adicionais e ele realmente parece funcionar bem no IE, mas você não pode arrastar para fora de listas aninhadas no FF.

$(".myList").sortable({ connectWith: ".myList", appendTo: 'body', helper: 'clone', items: 'li' });

Answer 3

Infelizmente para reviver esta discussão. Só queria postar para outros usuários que tropeçar em esta discussão.

Eu estou tendo exatamente o mesmo questões como Eli -. Usando 8.x Chrome

Eli - para resolver o problema 2, tirei classe "myList" de todos os sublists do elemento sendo arrastado. I mude para "mySubList" e, em seguida, chamar .sortable ( 'refresh') sobre o ser item da lista arrastado. Finalmente, eu mudá-lo de volta uma vez que o arrastamento é completo (e chamar atualização novamente). Que impede que o item pai de ser colocado em um de seus próprios sublists e causando o erro. Você não pode chamar classificável ( 'refresh') no evento de início do classificáveis ??(Não funcionou para mim de qualquer maneira), então você tem que criar seu próprio evento 'click' que faz todo esse trabalho antes dos eventos classificáveis começar a disparar.

Eu tenho uma alça, então eu apenas fazer todo esse trabalho quando o usuário clica no punho.

código (não testado, mas você vai ter a idéia, mesmo se ele não funciona):

$('.sortable_test').sortable({
   distance: 5,
   connectWith: ['.sortable_test'],
   placeholder: 'ui-state-highlight',
   forcePlaceholderSize: true
}).find('li').click(function() {
   $(last_selected_li).find('.mySubList').removeClass('mySubList').addClass('myList').end().sortable('refresh');
   $(this).find('.myList').removeClass('myList').addClass('mySubList').end().sortable('refresh');
});