Сетка с категориями перетаскивания и сортировки

Question

Я пытаюсь создать приложение, которое позволяет пользователям выполнять сопоставление историй.Небольшое примечание к тому, что это: у вас есть куча заметок, и вы делаете карту всех пользовательских задач и целей, размещая ее на доске.

Мне нужно настроить что-то, что позволяет это.Предпочтительно независимая сетка, которая может размещать элементы и сортировать их, а также позволяет изменять размер сетки.

То, что я сделал до сих пор:

Я использовал библиотеки jQuery UI с возможностью перетаскивания и сортировки.Я могу сортировать списки, связывать списки, динамически отображать представление из базы данных.Все в значительной степени функционально.

Вот ссылка на JSFiddle

HTML

<!-- <div style="margin: 30px;"> -->
<div class="container" style="display: table;">
  <div class="row" style="display: table-row; ">
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: orange;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
  </div>
  <div class="row" style="display: table-row;">
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: pink;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: pink;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-header" style="display: table-cell;">
    </div>
    <div class="sort-me-header" style="display: table-cell;">
      <div class="sticky" style="background-color: pink;">
        <b>Card Header</b> Put any text in here.
      </div>
    </div>
  </div>
  <hr>
  <div class="row" style="display: table-row;">
    <div class="sort-me-alpha" style="display: table-cell;">
      <div class="sticky">
        <b>Card 1</b> Put any text in here.
      </div>
      <div class="sticky">
        <b>Card 2</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-beta" style="display: table-cell;">
      <div class="sticky">
        <b>Card n</b> Put any text in here.
      </div>
    </div>
    <div class="sort-me-gamma" style="display: table-cell;">
      <div class="sticky">
        <b>Card 3</b> Put any text in here.
      </div>
      <div class="sticky">
        <b>Card 4</b> Put any text in here.
      </div>
      <div class="sticky">
        <b>Card 5</b> Put any text in here.
      </div>
    </div>
  </div>
</div>

Javascript / jQuery

  $(document).ready(function () {

$('.sort-me-alpha').sortable({
  connectWith: '.sort-me-gamma, .sort-me-beta, .sort-me-header',
  placeholder: "testclass",
  forcePlaceholderSize: true
});

$('.sort-me-beta').sortable({
  connectWith: '.sort-me-gamma, .sort-me-alpha, .sort-me-header',
  placeholder: "testclass",
  forcePlaceholderSize: true
});

$('.sort-me-gamma').sortable({
  placeholder: "testclass",
  forcePlaceholderSize: true,
  connectWith: '.sort-me-alpha, .sort-me-beta, .sort-me-header'
});

$('.sort-me-header').sortable({
  placeholder: "testclass",
  forcePlaceholderSize: true,
  connectWith: '.sort-me-alpha, .sort-me-beta, .sort-me-gamma, .sort-me-header',
  receive: function (event, ui) {
    var $list = $(this);

    if ($list.children().length > 1) {
      $(ui.sender).sortable('cancel');
    }
  }
});
});

В примере первые две строки (оранжевая и розовая) являются моими заголовками.Каждая карта помещается в отдельный сортируемый список.Эти списки занимают только одну карту.Я сделал это, потому что если вы посмотрите на желтые карточки, они представляют собой списки со связями, и если я переместу одну карточку из середины, появятся карточки внизу и автоматически займут ее место.Я знаю, что это встроенное поведение, и я хочу переопределить его.Я попробовал это с другим пользователем stackoverflow и добился успеха, представив пустую открытую карту.Но это не совсем элегантно для того, чего я хочу достичь.Другое ограничение заключается в том, что я не могу отсортировать две верхние строки.Они могут принимать только карту, а карта может оставить только этот заполнитель.Таким образом, чтобы вызвать определенное поведение, я компрометирую другое.

Может ли кто-нибудь направить меня сюда ИЛИ лучше, но при этом направить меня к API / библиотеке, которая лучше соответствует моим потребностям и обслуживает моитребования?