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

Stack Overflow用户

提问于 2020-10-15 21:02:41

回答 1查看 36关注 0票数 0

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>

$("#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/

当我将"Test“元素移到占位符上时，它会像预期的那样消失。但是当我把它移出去的时候它就不会再出现了。如何做到这一点？此外，在添加一个元素并使用"X“按钮再次删除它之后，可排序的元素也会消失。

jquery

jquery-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-16 20:27:35

我自己找到了一个解决方案：

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

});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64372180

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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