Trying to implement a nested sortable feature, and while it's mostly working, there's one little issue bothering me.
I'd like the placeholder to only disappear after I release the dragged item (on mouseup), but I'm struggling to achieve this.
The reason for this is that when sorting downwards, the removal of the placeholder affects the parent's height, causing a minor bug. You can see an example of this in action on this JSFiddle.
HTML
<div class="container">
<h1>Menu</h1>
<ul class="list-group striped nest">
<li class="list-group-item">Home <ul class="list-group striped nest"></ul></li>
<li class="list-group-item">About <ul class="list-group striped nest></ul></li>
<li class="list-group-item">
Services
<ul class="list-group striped nest">
<li class="list-group-item">Design <ul class="list-group striped nest></ul>&tl;/li>
<li class="list-group-item">Programming<ul class="list-group striped nest></ul>&tl;/li>
</ul>
</li>
<li class="list-group-item">Contact <ul class="list-group striped nest></ul>&tl;/li>
<li class="list-group-item">
<button class="btn btn-sm btn-default" data-toggle="collapse" data-target="#collapseExample">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</button>
Empty nestable
<ul id="collapseExample" class="collapse list-group striped nest" aria-expanded="false"></ul>
</li>
</ul>
</div>
CSS
ul.nest {
min-height: 42px;
margin: 0;
}
ul.nest:empty {
border: 1px dashed #ddd;
border-radius: 3px;
}
ul.nest li:hover {
cursor: pointer;
}
ul.nest:first-child {
margin-top: 5px;
}
.bg-info {
min-height: 42px;
list-style: none;
}
.striped li:nth-child(even) {
background-color: #f9f9f9;
}
Script
$(function() {
$('.nest').sortable({
connectWith: ".nest",
items: "> li",
axis: "y",
cursor: "row-resize",
opacity: 0.5,
placeholder: "bg-info"
}).disableSelection();
});