html - jQuery UI Sortable - Remove placeholder after item is dropped -

i'm trying nested sortable , i'm kind'a succeeding, there's 1 small little inconvenience bugs me.

i want placeholder disappear after i've dropped dragged item (on mouseup) , can't quite figure out how it.

i want because when sort downwards, deletion of placeholder affects parent's height, in turn creates small bug, check 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();  }); 

whenever drag li.list-group-item(selected tag) sortable plugin adding tag li.ui-sortable-placeholder show empty placeholder, , tag moves drag selected tag.

as per statement:

i want placeholder disappear after i've dropped dragged item (on mouseup) , can't quite figure out how it.

to added placeholder in following code $bgplaceholder. when move selected tag add $bgplaceholder after selected tag, , removes $bgplaceholder when drop selected tag.

and adding , .selected-tag class 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 hidden when adjacent .selected-tag , .bg-placeholder, hide unnecessary empty placeholder @ 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