jquery - crear niños con ordenables anidados
jquery-ui nested (1)
Estoy tratando de lograr lo que he visto algunos complementos como este , pero no puedo hacerlo funcionar correctamente.
Quiero poder crear nuevos hijos a partir de un ordenamiento anidado, por ejemplo: cuando arrastro el nodo "4", me gustaría ponerlo debajo del nodo "xx2" y un poco a la derecha. En esa acción, el marcador de posición debe sangrar a la derecha, por lo que crea una pista de que aparecerá una nueva rama.
Pude crear la pista, pero no puedo ingresar a ese nuevo espacio.
IMPORTANTE: Sé que un posible hack es para cada li tener y vaciar el ul , pero necesito tener una estructura como se muestra a continuación. Entonces cualquier nuevo niño se crea sobre la marcha .
HTML
<div class="tree">
<ul>
<li>
<a>
<label>
<span>A</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>1</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>x</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>xx1</span>
</label>
</a>
</li>
<li>
<a>
<label>
<span>xx2</span>
</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a>
<label>
<span>2</span>
</label>
</a>
</li>
</ul>
</li>
<li>
<a>
<label>
<span>B</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>3</span>
</label>
</a>
</li>
<li>
<a>
<label>
<span>4</span>
</label>
</a>
</li>
<li>
<a>
<label>
<span>5</span>
</label>
</a>
</li>
</ul>
</li>
<li>
<a>
<label>
<span>C</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>6</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>y</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>yy1</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>yyy1</span>
</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS
$("div.tree ul").sortable({
items: "li",
connectWith: "ul",
placeholder: "placeholder",
toleranceElement: "> a",
opacity: 0.5,
sort: function( event, ui )
{
$("ul:empty").remove();
var prev_li = ui.placeholder.prev("li");
if(prev_li.length)
{
if(ui.helper.position().left > prev_li.position().left + 50)
{
if(!prev_li.children("ul").length)
{
prev_li.append("<ul class=''new''></ul>");
}
}
}
},
stop: function( event, ui )
{
$("ul.new:empty").remove();
}
}).disableSelection();
CSS
.placeholder { height: 20px; border: 1px dotted red;}
ul.new {border: 1px dashed blue; height: 20px;}
FIDDLE: https://jsfiddle.net/wa614ago/5/
Edité tu código para que la lista se comportara como lo describiste. Resulta que el selector $(ul:empty) vuelve a estar vacío cuando un ul tiene espacios en blanco.
$("div.tree ul").sortable({
items: "li",
connectWith: "ul",
placeholder: "placeholder",
toleranceElement: "> a",
opacity: 0.5,
sort: function(event, ui) {
$("ul.ui-sortable:empty").remove();
var prev_li = ui.placeholder.prev("li");
if (prev_li.length) {
if (ui.helper.position().left > prev_li.position().left + 50) {
// If the current element has some empty ui sortables
prev_li.find("ul:not(:has(li))").remove();
// If the li has no ul''s
if (!prev_li.children("ul").length
//or if the ul contains the element that we are currently dragging then we append the new ul
|| prev_li.children("ul").find(''li'').first().hasClass(''ui-sortable-helper'')) {
// If there''s any other new elements in the list, remove them
$("ul.new:empty").remove();
//append hint
prev_li.append("<ul class=''new''></ul>");
}
}
}
},
out: function(event, ui) {
// As we move out of a drop zone we clean it from old uls
var prev_li = ui.placeholder.prev("li");
prev_li.find(''ul.new'').remove()
prev_li.find(''ul.ui-sortable:empty'').remove()
},
stop: function(event, ui) {
// We drop our element into the new ul
$(''ul.new'').removeClass(''new'').append(ui.item);
// Clean the whole list of empty ul''s
$("ul:empty").remove();
$("ul.ui-sortable:empty").remove();
}
}).disableSelection();
Aquí está el violín: https://jsfiddle.net/Lsn6aj22/3/
Espero que esto te ayude en el camino!