jQuery 移出或删除元素后，事件占位符上的可排序拖动消失

Question

HTML

<div class="mail-area">
  <div class="section">
    <div class="row">
      <div class="col-md-12">
        <ul class="sortable" id="sortable0">
          <li class="ui-state-highlight placeholder">Drop Items here</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- Droppable Area ends here -->

<hr>

<div class="snippets">
  <div class="draggable">
    <div>
      Test
    </div>
  </div>
</div>

JS

$("#sortable0").sortable({
  revert: true,
  placeholder: "ui-state-highlight",
  over: function(event, ui) {
    ui.helper.parent().find('.placeholder').hide();
  }
});
$(".draggable").draggable({
  connectToSortable: ".sortable",
  helper: "clone",
  revert: "invalid",
  stop: function (event,ui) {
            ui.helper.append("<button type=\"button\" class=\"close\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>");
            ui.helper.removeAttr("style");
        }
});
$("ul, li").disableSelection();

$(document.body).on("click", ".close", function () {
    $(this).parent().remove();
});

jsfiddle 演示：https://jsfiddle.net/89gzq31c/1/

当我将“测试”元素移到占位符上时，它会按预期消失。但是，当我将其移出时，它不会重新出现。如何做到这一点？此外，在添加一个元素并使用“X”按钮再次将其删除后，可排序项也会消失。

Answer 1

我自己找到了解决办法：

JS

$("#sortable0").sortable({
        revert: true,
        placeholder: "ui-state-highlight",
        stop: function(event, ui) {
            $(this).find('.placeholder').remove();
        },
    });

$(document.body).on("click", ".close", function () {
    var helpVar = $(this).parent().parent();
    $(this).parent().remove();
    if(helpVar.children().length == 0)
    {
        helpVar.append('<li class="ui-state-highlight ui-sortable-handle placeholder">Drop Items here</li>');
    }

});

jQuery 移出或删除元素后，事件占位符上的可排序拖动消失

jQuery Sortable drag over event placeholder disappears after moving out or deleting element

jquery

jquery-ui