jQuery comportamiento sortable inesperado

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

Pregunta

Estoy trabajando en un proyecto en el que puedo generar documentos de Word, una de las funcionalidades es definir una tabla de contenidos. Quiero que mi TOC sea una lista ordenable jQuery para la clasificación de los capítulos.

Estoy retreving recursivamente los datos de una tabla de MySQL, que funciona como se esperaba. Desde que encontré hay algunos comportamientos extraños en IE7 (y posibles otras versiones) Cambié volver a lo básico y trató lo siguiente en un archivo HTML simple, sin ninguna estructura generada-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>

Con esta fuente (no importa la cantidad de subniveles) espero que cada subcapítulo ser una lista ordenable único en su capítulo de los padres. En este FireFox funciona como debería, pero por desgracia en el trabajo IE7 es el navegador por defecto y no dispone de interruptor se puede hacer.

¿Alguien tiene algunas sugerencias de qué hacer?

Básicamente, sólo quiero reorganizar las listas y listas anidadas. En este momento sólo soy capaz de arrastrar Vuelta al mainchapters, cuando trato de arrastrar un subcapítulo toda la estructura de la lista de la matriz correspondiente está siendo arrastrado. Así, cuando trato de arrastrar el capítulo 2.2 'para colocarlo por encima de 'Capítulo 2.1' en realidad estoy arrastrando 'Capítulo 2', con la única Varias posibilidades para arrastrarlo por encima de 'Capítulo 1'.

Espero que mi pregunta es bastante clara.

He aquí una demostración. Añadir /edit a la URL para ver el código y jugar con él

¿Fue útil?

Solución

Sólo tiene que añadir este 

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

Esto detendrá IE de burbujeando el evento mousedown a la ul padres, lo que hace que el comportamiento puede ordenar extraña que haya visto. Ahora debería funcionar como se esperaba

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top