嵌套列表中小元素的jQuery UI Sortable Issue

Question

我使用嵌套的可排序对象，每个项目都有一个页眉和页脚。

将内部项目拖到外部列表时遇到问题。特别是在最后一个外部元素之后拖动将不起作用。 仅当在下部拖动元素时才会出现问题。开始在上部开始拖动。

我找到了问题所在，发现它只出现在一个小的页脚（约10像素高）上。如果我将页脚变大，它将起作用。但是目标设计确实需要10px;-）

我尝试了两种公差模式以及不同的自定义排序功能，但都无法正常工作。 如果我选择容差模式的“指针”，那么即使将其正常拖动到子列表中也将不再起作用。

记录首先显示了在顶部进行抓取的工作，然后在抓紧臀部时出现了问题点。

有没有针对此或其他自定义公差模式的解决方法？ 谢谢。

https://jsfiddle.net/zkyo2Lun/

$(function() {
	$('ul').sortable({
  	connectWith: 'ul',
  	//tolerance: 'pointer' //<-- does also not work as wanted
  });

});

	.item {
		margin-top: 5px;
		margin-bottom: 5px;
    border: 1px solid green;
	}
	
	.itemList {
		list-style: none;
		margin: 0px;
		padding: 0px;
    border: 1px solid red;
    min-height: 10px;
	}
	
	.itemSubList {
		padding-left: 15px;
	}
	
	.itemTitle, .itemFooter {
		color: #ffffff;
		background: #74b9ff;
		width: 280px;
		box-sizing: border-box;
		height: 30px;
		cursor: pointer;
	}
  
  .itemFooter {
    height: 10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<ul class="itemList">
  <li class="item">
	  <div class="itemTitle">outer1</div>
	  <ul class="itemList itemSubList">
      <li class="item">
	      <div class="itemTitle">item1</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter"></div>
      </li>
      <li class="item">
	      <div class="itemTitle">item2 (Dragging here works)</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter">(Dragging here fails) ---SAMPLE---</div>
      </li>
    </ul>
	  <div class="itemFooter"></div>
  </li>
  <li class="item">
	  <div class="itemTitle">outer2</div>
	  <ul class="itemList itemSubList">
      <li class="item">
	      <div class="itemTitle">item3</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter"></div>
      </li>
      <li class="item">
	      <div class="itemTitle">item4</div>
        <ul class="itemList itemSubList">
        </ul>
	      <div class="itemFooter"></div>
      </li>
    </ul>
	  <div class="itemFooter"></div>
  </li>
</ul>
^- drag SAMPLE after outer2 as last item