jQuery comportamiento ordenable inesperado

Estoy trabajando en un proyecto donde puedo generar documentos de Word, una de las funcionalidades es definir una tabla de contenidos. Quiero que mi TOC sea una lista jQuery ordenable para ordenar los capítulos.jQuery comportamiento ordenable inesperado

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

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 Firefox esto funciona como debería, pero desafortunadamente en el trabajo IE7 es el navegador predeterminado y no se puede hacer ningún cambio.

¿Alguien tiene alguna sugerencia de qué hacer?

Básicamente solo quiero reorganizar listas y listas anidadas. En este momento, solo puedo arrastrar los arcos principales, cuando trato de arrastrar un subcapítulo, toda la estructura de listas del padre correspondiente se está arrastrando. Entonces, cuando trato de arrastrar 'Capítulo 2.2' para colocarlo sobre 'Capítulo 2.1' En realidad estoy arrastrando 'Capítulo 2', con la única posibilidad de arrastrarlo sobre 'Capítulo 1'.

Espero que mi pregunta sea lo suficientemente clara.

Here's a Demo. complemento /edit a la URL para ver el código y jugar con él

Fuente

2009-11-24 Ben

agregó una demostración para que la gente pueda ver el problema en IE7 –

¡Gracias !, le di +1 por poner una demostración en línea. Estoy detrás de docenas de firewalls aquí, así que no pude hacer eso. De hecho, la demostración ilustra perfectamente lo que está pasando mal. – Ben

@Russ Cam: jsbin es bueno :) – Xinus

Sólo añadir esta

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

Esto detendrá IE de burbujeando el evento mousedown al padre ul, lo que hace que el comportamiento extraño ordenable que has visto. Ahora debería funcionar como se esperaba

Fuente

2009-11-24 12:28:34 jitter

¡Gracias! ¡De hecho fue el truco! +1 + ¡Aceptar! ¡Gracias de nuevo! – Ben

Hombre, jitter, ¡acaba de salvarme el día! +1 –

+1 También la solución que he buscado. –

jQuery comportamiento ordenable inesperado

Respuesta

Cuestiones relacionadas