questão classificáveis ??jquery.ui

Question

Eu criei uma lista aninhada com a funcionalidade de arrastar / soltar. Meu problema é que eu quero cada aninhamento para classificar em si. Por exemplo:

-first_level
-first_level
 -second_level
 -second_level
-first_level

"Primeiro nível" não deve ser capaz de entrar em "segundo nível" e vice-versa. Eu pensei que eu poderia fazer isso com a opção de contenção, mas nenhum dado lá. Ele funciona com mantendo o segundo níveis de fora do primeiro nível, mas não o contrário.

Aqui está o meu exemplo JS e lista:

$("#sort_list").sortable({
  containment: '#sort_list',                                             
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});
$(".sub_list").sortable({ 
  containment: 'parent',
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8,
});
$("#sort_list").disableSelection();

<ul id="sort_list">
  <li>one</li>
  <li>two
    <ul class="sub_list">
    <li>sub one</li>
    <li>sub two</li>
    </ul>
  </li>
  <li>three</li>
  <li>four</li>
</ul>   

Todas as idéias? Obrigado rapazes!

Answer 1

Ok, parece que eu encontrei o problema. Eu estava declarando: itens: 'li' e por isso não foi detectar a UL como um item de container / classificáveis. Um grande obrigado a karim79 para ajudar-me pensar tudo isso através de:)

Abaixo está o código de trabalho (é basicamente dizendo "Todos estadia em seu próprio recipiente"):

    $("#sort_list").sortable({
      containment: 'parent',                                                                                     
      axis: 'y',
      revert: true,
      opacity: 0.8
    });
    $(".sub_list").sortable({ 
      containment: 'parent',
      axis: 'y',
      revert: true,
      opacity: 0.8,
    });
    $("#sort_list").disableSelection();

    <ul id="sort_list">
      <li>one</li>
      <li>two
        <ul class="sub_list">
        <li>sub one</li>
        <li>sub two</li>
        </ul>
      </li>
      <li>three</li>
      <li>four</li>
    </ul>

Agora que temos o "artigo: li" coisa resolvido, podemos até mesmo remover contenção:. 'Pai', na lista top sem medo das listas colidindo

Answer 2

Tente dar a opção de contenção de um seletor complexo como:

$("#sort_list").sortable({
  containment: '#sort_list:not(.sub_list)',                                                                                     
  axis: 'y',
  revert: true,
  items: 'li',
  opacity: 0.8
});

Isso deve fazer o truque se você estiver usando jQuery 1.3 +:

(a partir do manual)

A partir de jQuery 1.3: Não () também apoio selectores separados por vírgulas e selectores de complexos, por exemplo: : Não (div a) e: não (div, a)

.

O manual jQuery Sortable diz o href="http://docs.jquery.com/UI/Sortable#option-containment" rel="nofollow noreferrer"> contenção opção :

Restringe arrastando para dentro do limites do elemento especificado - CAN ser um elemento DOM, 'mãe', 'Documento', 'janela', ou um jQuery selector.