JQuery comportamento classificável inesperado

StackOverflow https://stackoverflow.com/questions/1789169

Pergunta

Estou trabalhando em um projeto em que posso gerar documentos do Word, uma das funcionalidades é definir um índice. Quero que meu Toc seja uma lista de jQuery classificável para classificar os capítulos.

Estou recuperando os dados recursivamente de uma tabela MySQL, que funciona conforme o esperado. Como descobri que existem alguns comportamentos estranhos no IE7 (e possíveis outras versões), voltei ao básico e tentei o seguinte em um arquivo HTML simples sem qualquer estrutura gerada por DB.

<!doctype html>
<html>
<head>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("ul.list").sortable({
      opacity: 0.7,
      helper: 'clone',
      cursor: 'move',
      tolerance: 'pointer'
    });
  $("ul.list").selectable();
  $("ul.list").disableSelection();
});
</script>
<style type="text/css">
ul.list {
  list-style:none;
  padding:none;
  margin:none;
  border:1px solid #EFEFEF;}
ul.list:hover {
  border:1px dotted #333;}
</style>
</head>
<body>
  <ul class="list">
    <li>Chapter 1</li>
    <li>Chapter 2
      <ul class="list">
        <li>Chapter 2.1</li>
        <li>Chapter 2.2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Com essa fonte (independentemente da quantidade de subnacionais), espero que cada subcapítulo seja uma lista classável exclusiva dentro do capítulo pai. No Firefox, isso funciona como deveria, mas infelizmente no trabalho IE7 é o navegador padrão e nenhum interruptor pode ser feito.

Alguém tem algumas sugestões o que fazer?

Basicamente, eu só quero reorganizar listas e listas aninhadas. Nesse momento, só sou capaz de arrastar os principais mantanses, quando tento arrastar um subcapítulo a estrutura inteira do pai correspondente está sendo arrastado. Então, quando tento arrastar o 'Capítulo 2.2' para colocá -lo acima 'Capítulo 2.1' Estou realmente arrastando 'Capítulo 2', com o único posibillity para arrastá -lo acima 'Capítulo 1'.

Espero que minha pergunta seja clara o suficiente.

Aqui está uma demonstração. adicionar /edit para o URL para ver o código e brincar com ele

Foi útil?

Solução

Basta adicionar isso

$('ul.list').bind('mousedown', function(e) {
  e.stopPropagation();
});

Isso vai impedir que isto é, de borbulhar o mousedown evento para o pai ul, o que causa o estranho comportamento classificável que você viu. Agora deve funcionar como esperado

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