jquery可拖动问题无法拖动任何空的父div答案

【问题标题】：jquery draggable issue can't drag in any empty parent divjquery可拖动问题无法拖动任何空的父div
【发布时间】：2021-11-26 11:18:10
【问题描述】：

我正在处理嵌套的父子列表项。

这里是演示链接https://jsfiddle.net/fahadsheikh/kq5oxbrs/2/

可排序和可拖动的工作正常，但如果父 div 之一为空，则拖动不起作用。

$(document).ready(function() {

  // 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'
  });

});

$('#btn1').click(function() {
  getSortableList('.sortMenu');
})

$('#btn2').click(function() {  
  getSortableList('.menuItems');
})

function getSortableList(className){
  var sortables = $(className);
  var myArray = new Array();
  sortables.each(function() {
    myArray = myArray.concat($(this).sortable('toArray'));
  })
  alert(myArray.length);
}

.menuGroup {
  margin: 10px;
  padding: 10px;
  border: 1px solid #000000;
}

.menuGroup h2 {
  margin: 0;
  padding: 0px 0px 20px 0px;
}

.menuItems {}

.menuItem {
  margin: 5px;
  padding: 10px;
  margin-left: 50px;
  border: 1px solid #000000;
  background-color: #cecece;
}

.menuPlaceholder {
  width: 100%x;
  height: 50px;
  padding: 20px;
  display: block;
  margin: 0 0 15px 0;
  background: #cccccc;
  border: 1px dashed #000000;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<button id="btn1">get sortMenu </button>
<button id="btn2">get menuItems </button>


<div class="sortMenu">
  <div class="menuGroup">
    <h2>Parent #1</h2>
    <div class="menuItems">
      <div class="menuItem">
        Child 1.1
      </div>
      <div class="menuItem">
        Child 1.2
      </div>
      <div class="menuItem">
        Child 1.3
      </div>
      <div class="menuItem">
        Child 1.4
      </div>
    </div>
  </div>
  <div class="menuGroup">
    <h2>Parent #2</h2>
    <div class="menuItems">
      <div class="menuItem">
        Child 2.1
      </div>
      <div class="menuItem">
        Child 2.2
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： jquery-ui jquery-ui-draggable

【解决方案1】：

这是一个已知的错误。应用min-height 应该可以解决问题

添加以下css

<style>
.menuItems {
      min-height: 100px;
      background: yellow; // optional 

}
</style>

【讨论】：