jquery draggable issue can't drag in any empty parent div - jquery-ui

Question

I am working on nested parent and child list item.
Here is demo link https://jsfiddle.net/fahadsheikh/kq5oxbrs/2/
The sortable and draggable working fine but when if one of parent div is empty than draggle not working.
$(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>

Answer 1

This is a known bug.
Applying min-height should fix the issue
Add the following css
<style>
.menuItems {
min-height: 100px;
background: yellow; // optional
}
</style>