jQuery可排序的孩子不会进入父母

Question

如果其中一个父母被清空（孩子转移到另一个父母），那么您将无法将孩子移回空父母。

https://jsfiddle.net/k8x7om75/

    // Sort the parents
    $(".sortMenu").sortable({
        containment: "document",
        items: "> div",
        tolerance: "pointer",
        cursor: "move",
        opacity: 0.7,
        revert: 300,
        delay: 150,
        placeholder: "menuPlaceholder",
        start: function(e, ui) {
            ui.placeholder.height(ui.helper.outerHeight());
        }
    });

    // Sort the children
    $(".menuItems").sortable({
        items: "> div",
        tolerance: "pointer",
        containment: "document",
        connectWith: '.menuItems'
    });

通常我会自己做，但我不知道 JavaScript 或它的任何风格。抱歉，如果这看起来微不足道，但我需要帮助。谢谢

Answer 1

添加以下css：

.ui-sortable{
   padding: 5px;
 }

您正面临这个问题，因为一旦您的父容器变空，那么父容器中可排序 div 的高度就会变为 0，没有地方可以将子容器拖回其中。

如果您不想要额外的填充，则按如下方式制作 css：

 .ui-sortable{
     min-height: 10px;
  }