垂直排列父母，水平排列孩子

Question

在part上进行

sortable工作正常-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")。这样，排序事件的目标就是零件而不是父零件。

我建议使用手柄或一些填充物。

$(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>

通过在左侧添加一些填充（16px），我现在有了一个定义的空间，可以抓住部件而不必抓住单个部件，并且可以按预期对它进行排序。 items可能不是必需的，但是它在检查代码时确实使事情变得清晰。

希望有帮助。