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 以将其显示为空占位符，并且此标签会随着您拖动所选标签而移动。

根据你的说法：

我希望占位符仅在我删除 当前拖动的项目（在 mouseup 上），我不太清楚如何 去做吧。

为此，我在以下代码中添加了另一个占位符$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

Answer 2

要获得所需的输出，我们需要分别对 List Items 和 Header 执行可拖动和可排序的功能。

$('.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,
});

然后我们需要属性 connectToSortable:'.nest' 和 helper: 'clone' 用于可拖动函数，以将排序功能应用于列表项的可拖动函数并在拖动后克隆列表项。克隆将留在项目中。

helper : 'clone',
connectToSortable: '.nest',

当可拖动功能应用了可排序内容时，我们需要删除克隆。为此，请在 sortable 函数中添加接收功能

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>