Question

我正在尝试进行嵌套排序，我很有成就，但是有一点点不便给我带来了麻烦。

我希望占位符仅在我删除当前拖动的项目后（在鼠标上）消失，我无法弄清楚如何操作。

我想这样做，因为当我向下排序时，删除占位符会影响父级的高度，而这又会产生一个小错误，请在此处查看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 以将其显示为空占位符，并且此标记在您拖动时移动选定的标签。

根据你的陈述：

我希望占位符在我放弃之后才会消失目前拖动项目（鼠标上），我不知道如何这样做。

为此，我在以下代码 $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; } 将被隐藏在选定的标签上隐藏不必要的空占位符。

IWCRW

示例：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：＆＃39; .nest＆＃39;和助手：＆＃39;克隆＆＃39; for draggable函数将排序功能应用于listitem的可拖动功能，并在拖动后克隆listitem。克隆将保留在该项目中。

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

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

receive: function (event, ui) {
    ui.item.remove();
}

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery UI Sortable - 删除项目后删除占位符

2 个答案: