Versión corta: ¿Cómo puedo arrastrar Link 1 a uno de los menús desplegables de Link 3 en esta demostración? http://jsfiddle.net/Gdadu/2/¿Cómo puedo arrastrar un elemento a una lista desplegable usando jQuery UI sortable()?
EDITAR: La cuestión se ha planteado acerca de lo que debe suceder cuando se arrastra un elemento sobre otro: ¿debe ser colocado a la izquierda/derecha o iniciar un nuevo submenú? Para que la lista sea totalmente ordenable, tiene que haber alguna manera de colocar elementos en submenús no existentes, comenzando un nuevo menú desplegable ul. Podría insertar un ul vacío en cada elemento de la lista que todavía no tenga uno como objetivo de soltar, pero el problema anterior todavía existe.
Esto parece mucho más difícil de lo que pensé inicialmente, así que me disculpo por no haber puesto más esfuerzo en esto todavía, ya que no había considerado algunos de estos problemas. Estoy dispuesto a aceptar una respuesta al problema establecido y me preocupo por el resto más adelante.
Tengo una lista de navegación desplegable básica que quiero ser completamente ordenable, usando jQuery UI. Cualquier elemento li debería poder moverse a cualquier posición en la lista completa. Tengo problemas para arrastrar los elementos de la lista de nivel superior a los submenús, parece que :hover no se activa en la lista desplegable mientras está en "modo de arrastre", por lo que los menús desplegables no aparecen.
Ejemplo HTML:
<ul class="dropdown">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Mi CSS:
.dropdown,
.dropdown li,
.dropdown ul {
list-style:none;
margin:0;
padding:0;
}
.dropdown {
position:relative;
display:block;
z-index:10000;
}
.dropdown ul {
position:absolute;
top:100%;
width:100%;
visibility:hidden;
display:none;
z-index:900;
}
.dropdown ul ul {
top:0;
left:100%;
}
.dropdown li {
position:relative;
float:left;
}
.dropdown li:hover{
z-index:910;
cursor:default;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
visibility:visible;
display:block;
}
.dropdown a {
text-decoration:none;
display:block;
padding:.5em 2em;
background:#cde;
border:1px solid #ccc;
}
.dropdown ul li {
width:100%;
}
inicialización Sortable:
$('.dropdown').sortable({
items: 'li'
});
Demostración: http://jsfiddle.net/Gdadu/2/
Por ejemplo, quiero dr ag "Enlace 1" en un submenú, pero no puede hacerlo porque el submenú no aparece mientras se arrastra, como si se ignorase :hover. No estoy seguro de si el problema radica en el CSS o javascript. ¿Qué puedo hacer sobre esto?
Buena idea de los comentarios:
Tal vez podría desencadenar todo para expandirse cuando se inicia un lastre
Esto probablemente funcionaría, pero no quiero que todo el menú se expanda. Podría ser una gran cantidad de contenido con muchos enlaces y 3 niveles de navegación, y probablemente se superponga con todos los menús desplegables/desplegables (gran desastre).
Si está arrastrando algo, que se ciernen sobre lo que está arrastrando, que está bloqueando el elemento debajo de ella ... Hemos – Fosco
Todavía está sobrevolando múltiples elementos, mira aquí, por ejemplo: http://jsfiddle.net/Gdadu/4/ El 'html: hover' todavía se activa. En cualquier caso, estoy buscando una solución al problema planteado. –
Eso es solo porque ya está activo antes de arrastrar. No se dispararán nuevos desplazamientos al arrastrar. Quizás puedas disparar todo para expandir cuando se inicie un arrastre. – Fosco