javascript - 垂直排序父级，水平排序子级

Question

可在部分上排序工作正常 - 单个水平排序。

为什么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

主要问题是，如果不点击 $(".single")，就无法点击 $(".part")。排序事件的目标是部件而不是父部件。

我建议使用 handle 或一定量的填充物。

$(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，但它确实在检查代码时澄清了事情。

希望有帮助。