jQuery динамическая сортировка с вложенными сортируемыми элементами - PullRequest
Новая
       23

jQuery динамическая сортировка с вложенными сортируемыми элементами

1 голос
/ 17 июня 2019

Динамический сортируемый

Версия Codepen

Описание

У меня проблема с динамическим сортируемым списком, элементы которого также должны сортироваться. Проблема в том, что каждый элемент в списке является динамическим, так как он будет клонирован из шаблона div и добавлен в документ.

Выпуск

В настоящее время блоки (. Pb-row) сортируются, как и ожидалось.
Но вложенная сортировка для динамически добавляемых виджетов (. Builder-row-content) не работает.

Только вложенные узлы в первом блоке могут быть перетаскиваемыми и очень глючными. Также я могу перетащить их за пределы ряда.

Узлы из дополнительно добавленных блоков вообще не перетаскиваются.

Также я получаю это сообщение в консоли

не может вызывать методы для сортировки до инициализации; попытался вызвать метод «refresh»

код

HTML для запуска сортировки: 

 <div class="pb-rows"> // Wrapper of all Blocks
   <div class="pb-row" name="pb-row"> // each Block
      <div class="builder-row-header">
          <span class="row-btn pb-handle fas fa-sort"></span>
           <div>Block</div>
           <span onclick="handleRemoveClick(this)" class="row-btn row-btn-right pb-remove fas fa-trash"></span>
       </div>
       <div class="pb-container">
          <div class="builder-row-content">
            // nested sortable widgets will appear here
          </div>
       </div>
   </div>
   // more .pb-rows will appear here
 </div>

Попытка сортировки списка jQuery: 

// jQuery Sorting Lib
jQuery(".pb-rows").sortable({
  handle: ".pb-handle",
  cursor: "grabbing",
});

// jQuery Sorting Lib
jQuery(".builder-row-content").sortable({
  connectWith: '.pb-rows
  handle: ".pb-handle-widget",
  cursor: "grabbing",
});

Попытка решения, которая не работает: 

const handleAddClick = e => {
  e.preventDefault();
  ...
  jQuery(".builder-row-content").sortable("refresh");
};

Скриншот

Скриншот реализации

1 Ответ

0 голосов
/ 24 июня 2019

Вам нужно переинициализировать сортируемый на динамически добавленные элементы, так:

Оберните свои сортируемые функции в функцию 

// Sorting
function enableSort() {
  // jQuery Sorting Lib
  $(".pb-rows").sortable({
    handle: ".pb-handle",
    cursor: "grabbing"
  });

  // jQuery Sorting Lib
  $(".builder-row-content").sortable({
    handle: ".pb-handle-widget",
    cursor: "grabbing"
  });
} enableSort();

Затем вызовите функцию в pbCreateNode. 

const pbCreateNode = (type, props, html) => {
  enableSort();
  let element = document.createElement(type);
  props &&
    props.forEach(prop => {
      let key = Object.keys(prop)[0];
      let value = prop[key];
      element.setAttribute(key, value);
    });
  html && (element.innerHTML = html);
  return element;
};
...