jQuery UI sortable/draggable 空父级div无法拖拽问题咨询

导致空父div拖拽失效的核心原因是空的.menuItems容器没有默认高度，jQuery UI Sortable无法识别到有效的拖拽放置区域，因此无法接收拖拽的子元素。

修复步骤 #

1. 调整CSS样式，给.menuItems设置最小高度和内边距，保证容器为空时也有可触发拖拽检测的交互区域：

/* 替换原CSS中的空.menuItems样式 */
.menuItems {
  min-height: 40px;
  padding: 8px 0;
  box-sizing: border-box;
}

2. 可选项：如果需要优化拖拽放置的识别灵敏度，可以给子元素sortable配置补充placeholder参数，和父容器的交互体验保持一致：

// 修改子元素sortable配置
$(".menuItems").sortable({
  items: "> div",
  tolerance: "pointer",
  containment: "document",
  connectWith: '.menuItems',
  placeholder: "menuPlaceholder",
  start: function(e, ui) {
    ui.placeholder.height(ui.helper.outerHeight());
  }
});

修改完成后，即使父容器的子项被全部清空，也依然可以正常拖拽子元素放入空容器中。

内容的提问来源于stack exchange，提问作者fahdshaykh