jQuery UI Sortable - 删除元素后删除占位符

Question

我正在尝试做一个嵌套排序，我有点成功，但有一个小的不便让我烦恼。

我希望占位符仅在我放下当前拖动的元素(在 mouseup 上)后消失，但我不太清楚该怎么做。

我想这样做是因为当我向下排序时，占位符的删除会影响父级的高度，这反过来会产生一个小错误，检查这个 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></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;
}

脚本

$(function() {

  $('.nest').sortable({
    connectWith: ".nest",
    items: "> li",
    axis: "y",
    cursor: "row-resize",
    opacity: 0.5,
    placeholder: "bg-info"
  }).disableSelection();

});

Answer 1

每当您拖动 li.list-group-item(selected tag) 可排序插件时添加另一个标签 li.ui-sortable-placeholder 以将其显示为空占位符，并且此标签会随着您拖动所选标签而移动。

根据你的说法:

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.

为此，我在以下代码 $bgPlaceholder 中添加了另一个占位符。 当您移动所选标签时，它会在所选标签后添加 $bgPlaceholder，并在您移动时移除 $bgPlaceholder放下选定的标签。

并且还向选定标签添加 .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();
});

});

和CSS

li.ui-sortable-placeholder 与 .selected-tag 相邻且.bg-placeholder，这是为了在选定的标签处隐藏不必要的空占位符。

.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;
}

示例:JSFiddle