Question

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

.wrapca, .wrapcb{
	width:30%;
	display:inline-grid;
	grid-template-columns:repeat(2, 1fr);
	grid-gap:5px;
}

.inside{
cursor:cell;
background:gold;
}

<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 style="text-align:justify; text-align-last:justify;">
<div class='wrap wrapca'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>

<div class='wrap wrapcb'>
<div class='inside'>lorem</div>
<div class='inside'>ipsum</div>
</div>
</div>

为什么connectWith在这里不起作用？

Answer 1

此列表中的项目应连接到的其他可排序元素的选择器。这是一种单向关系，如果您希望双向连接项目，则必须在两个可排序元素上设置connectWith选项。

$(function() {
  $('.wrap').sortable({
    containment: $(".wrap").parent(),
    connectWith: ".wrap",
    //axis: "x",
    tolerance: "pointer"
  });
});

.wrapca,
.wrapcb {
  width: 30%;
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
}

.inside {
  cursor: cell;
  background: gold;
}

<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 style="text-align:justify; text-align-last:justify;">
  <div class='wrap wrapca'>
    <div class='inside'>lorem</div>
    <div class='inside'>ipsum</div>
  </div>

  <div class='wrap wrapcb'>
    <div class='inside'>lorem</div>
    <div class='inside'>ipsum</div>
  </div>
</div>

我怀疑您的代码过于激进。另外，收容措施过于严格。

可排序-connectWith不起作用-lorem ipsum

1 个答案: