сортировка родителей по вертикали и ребенка по горизонтали

Question

сортируется по part работает нормально - single сортируются по горизонтали.

Почему parent не сортируется - сортировка part по вертикали?

	$('.parent').sortable({
		items: ".part",
		containment: "parent",
		tolerance: "pointer",
		axis: "y",
	});


	$('.part').sortable({
		containment: "parent",
		tolerance: "pointer",
		axis: "x",
	});

.parent{
background:silver;
position:fixed;
width:90%;
left:5%;
height:50px;
overflow-y:scroll;
}
.part{
background:lightgreen;
margin:5px;
display:grid;
grid-template-columns:50% 50%;
}
.single{
background:gold;
cursor:cell;
}

<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.js"></script>
<div class='parent'>
<div class='part'>
<div class='single'>lorem1</div>
<div class='single'>ipsum1</div>
</div>
<div class='part'>
<div class='single'>lorem2</div>
<div class='single'>ipsum2</div>
</div>
</div>

Answer 1

Основная проблема заключается в том, что нет места для нажатия на $(".part") без нажатия на $(".single").Тогда целью события sort является часть, а не родитель.

Я бы посоветовал либо дескриптор, либо некоторое количество отступов.

$(function() {
  $('.parent').sortable({
    items: "> .part",
    containment: "parent",
    tolerance: "pointer",
    axis: "y",
  });

  $('.part').sortable({
    containment: "parent",
    items: "> .single",
    tolerance: "pointer",
    axis: "x",
  });
});

.parent {
  background: silver;
  position: fixed;
  width: 90%;
  left: 5%;
  height: 50px;
  overflow-y: scroll;
}

.part {
  background: lightgreen;
  margin: 5px;
  padding-left: 16px;
  display: grid;
  grid-template-columns: 50% 50%;
}

.single {
  background: gold;
  cursor: cell;
}

<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.js"></script>
<div class='parent'>
  <div class='part'>
    <div class='single'>lorem1</div>
    <div class='single'>ipsum1</div>
  </div>
  <div class='part'>
    <div class='single'>lorem2</div>
    <div class='single'>ipsum2</div>
  </div>
</div>

Добавив некоторые отступы, слева на 16 пикселей, теперь у меня есть определенное пространство, в котором я могу взять партию, не захватывая ни одного, и ямогу отсортировать как положеноitems может и не понадобиться, но при просмотре кода все проясняется.

Надеюсь, это поможет.