JQuery UI Sortable - remove placeholder after item is dropped
I am trying to do a nested sort and I am kind, but I have a slight slight inconvenience that bothers me.
I only want the placeholder to disappear after I have dropped the currently dragged element (on the mouse) and I cannot figure out how.
I want to do this because when I sort down, removing the placeholder affects the parent height, which in turn creates a small error, 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();
});
source to share
Whenever you drag the sortable plugin li.list-group-item(selected tag)
by adding another tag li.ui-sortable-placeholder
to show it as an empty placeholder and that tag moves as you drag the selected tag.
According to your statement:
I only want the placeholder to disappear after I have dropped the currently dragged element (on the mouse) and I can't figure out how to do this.
For this, I added another placeholder in the following code $bgPlaceholder
. When you move the selected tag, it adds $bgPlaceholder
after the selected tag, and removes $bgPlaceholder
when the selected tag is dropped.
As well as adding and .selected-tag
class to the 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 it is adjacent to .selected-tag
and .bg-placeholder
to hide the unnecessary empty placeholder in the 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
source to share
In order to get the desired result, we need to perform the drag and drop functions on the list and title items, respectively.
$('.nest:has(li)').sortable({
connectWith: ".nest",
items: "> li",
axis: "y",
cursor: "row-resize",
opacity: 0.5,
placeholder: "bg-info",
}).disableSelection();
$('.nest:has(li)>li').draggable({
tolerance:"pointer",
refreshPositions: true ,
opacity:.4,
});
And then we need the connectToSortable: '.nest' and helper: 'clone' property for the dragged function to apply the sort function to the dragged list function and clone the list after dragging. The clone will remain in the item.
helper : 'clone',
connectToSortable: '.nest',
When the drag and drop function has applied the sortable content, we need to delete the clone. To do this, add the receive function to the sorted function
receive: function (event, ui) {
ui.item.remove();
}
$(function() {
$('.nest:has(li)').sortable({
connectWith: ".nest",
items: "> li",
axis: "y",
cursor: "row-resize",
opacity: 0.5,
placeholder: "bg-info",
receive: function(event, ui) {
ui.item.remove();
}
}).disableSelection();
$('.nest:has(li)>li').draggable({
tolerance: "pointer",
helper: 'clone',
refreshPositions: true,
opacity: .4,
connectToSortable: '.nest',
});
});
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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<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>
source to share