jQuery UI Sortable: no permitir la transferencia a elementos secundarios
-
08-07-2019 - |
Pregunta
Estoy trabajando con los ordenables de la interfaz de usuario de jQuery y he creado un sistema de divs en este formato;
<div class='mainDiv'>
<label>text: <input type='text' name='textbox' /></label>
<div class='children'>
<div class='mainDiv'>...</div>
<div class='mainDiv'>...</div>
<div class='mainDiv'>
<label>text: <input type='text' name='textbox' /></label>
<div class='children'>...</div>
</div>
</div>
</div>
Los divs pueden tener un número infinito de hijos, y quiero poder arrastrar y soltar todos los .mainDiv dentro de su caja principal, así que he usado esto:
$(".mainDiv").parent().sortable({items: ".mainDiv", containment: "parent"});
Sin embargo, esto permite que los elementos se arrastren a sus divs hijos o hermanos .children. lo cual no quiero que suceda Quiero restringir los elementos para que permanezcan dentro de sus padres.
Cualquier ayuda aquí sería importante.
Saludos
Solución
Logré resolverlo así:
$(this).parent().sortable({
items: '> li',
axis: 'y',
...
});
En su caso, debería funcionar con:
items: '> .mainDiv'
contención: " parent " no es obligatorio.
En mi caso, habilito "ordenable" durante un evento de clic anterior, ya que es más rápido. Creo que es más fácil si lo unes al mousedown " evento. Si crea el árbol dinámicamente (por ejemplo, Ajax), le recomiendo que use '' livequery ''.