jQuery UI Sortable - Remove placeholder after item is dropped

Question

I'm trying to do a nested sortable and I'm kind'a succeeding, but there's one small little inconvenience that bugs me.

I want the placeholder to disappear only after I've dropped the currently dragged item (on mouseup) and I can't quite figure out how to do it.

I want to do this because when I sort downwards, the deletion of the placeholder affects the parent's height, which in turn creates a small bug, check this JSFiddle here.

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></li>
                <li class="list-group-item">Programming<ul class="list-group striped nest"></ul></li>
            </ul>
        </li>
        <li class="list-group-item">Contact <ul class="list-group striped nest"></ul></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();

});

Answer 1

Whenever you drag the li.list-group-item(selected tag) sortable plugin adding another tag li.ui-sortable-placeholder to show it as empty placeholder, and this tag moves as you drag the selected tag.

As per you statement:

I want the placeholder to disappear only after I've dropped the currently dragged item (on mouseup) and I can't quite figure out how to do it.

To do this I added another placeholder in the following code $bgPlaceholder. When you move the selected tag it will add $bgPlaceholder after the selected tag, and removes $bgPlaceholder when you drop the selected tag.

And also adding and .selected-tag class to selected tag.

$(function() {

var $bgPlaceholder = '<li class="bg-placeholder"></li>';
var draggable = false;
var isInMove = false;
$('.nest').sortable({
    connectWith: ".nest",
    items: "> li",
    axis: "y",
    cursor: "row-resize",
    opacity: 0.5
}).disableSelection();

$(".nest").on("mousedown", "li.list-group-item", function() {
    draggable = true;
    var $this = $(this);
    $this.addClass("selected-tag");
});

$(".nest").on("mousemove", "li.list-group-item", function() {
    if (draggable && !isInMove) {
        isInMove = true;
        var $this = $(this);
        $($bgPlaceholder).insertAfter($this);
    }
});

$(".nest").on("mouseup", "li.list-group-item", function() {
    draggable = false;
    isInMove = false;
    var $this = $(this);
    $this.removeClass("selected-tag");
    $(".nest").find(".bg-placeholder").remove();
});

});

and CSS

li.ui-sortable-placeholder will be hidden when its adjacent to .selected-tag and .bg-placeholder, this is to hide unnecessary empty placeholder at selected tag.

.bg-placeholder {
min-height: 42px;
list-style: none;
background-color: red!important;
}

.bg-placeholder + .ui-sortable-placeholder {
display: none;
}

.selected-tag + .ui-sortable-placeholder {
display: none;
}

Example : JSFiddle