Элементы, перетаскиваемые из нескольких контейнеров / сетки

Question

Я хотел бы иметь возможность перетаскивать / сортировать элементы между несколькими сетками. Очень похоже на следующий фрагмент / изображение.

Однако проблема в том, что когда я перетаскиваю элемент за пределы сетки, он начинает неожиданно прыгать / прятаться и действовать беспорядочно. Есть ли лучший способ (также может быть какой-нибудь плагин), который может помочь мне достичь этого поведения?

Большое спасибо.

$( document ).ready(function() {
$(".sortable-grid").sortable({
    revert: true
});

$(".sortable-element").draggable({
    connectToSortable: ".sortable-grid",
    revert: "invalid"
});
});

.sortable-grid {
  padding: 15px;
  border: 1px dashed;
}

.sortable-element {
  background-color: #DDD;
  margin-bottom: 5px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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.min.js"></script>

<div class="sortable-grid">
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="row">
    <div class="col-md-4">
      <div class="sortable-grid">
          <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
            <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
          <div class="sortable-element">Some content</div>
      </div>
    </div>
  </div>
 
</div>

введите описание изображения здесь

Answer 1

Не понятно, зачем вам Draggable. Поскольку все элементы находятся в Сортируемом объекте, их уже можно перетаскивать.

Пример:

$(function() {
  $(".sortable-grid").sortable({
    revert: true
  });
});

.sortable-grid {
  padding: 15px;
  border: 1px dashed;
}

.sortable-element {
  background-color: #DDD;
  margin-bottom: 5px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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.min.js"></script>

<div class="sortable-grid">
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="sortable-element">Some content</div>
  <div class="row">
    <div class="col-md-4">
      <div class="sortable-grid">
        <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
        <div class="sortable-element">Some content</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="sortable-grid">
        <div class="sortable-element">Some content</div>
      </div>
    </div>
  </div>

</div>