сортируемый - connectWith не работает - lorem ipsum

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>

Я подозреваю, что вы слишком агрессивны в своем коде.Кроме того, сдерживание было слишком строгим.