Skip to main content

Sortable List (Сортований список)

Навігація

Sortable List (Сортований список)

techno4 v2.0.4 Core Component MIT License GitHub Repository CO «CF TECHNO4»

Sortable дозволяє користувачеві змінювати порядок елементів у списку за допомогою перетягування (Drag-and-Drop) із сенсорною підтримкою.

HTML-розмітка сортованого списку

Додайте клас sortable до списку та елемент sortable-handler у кожен пункт:
<div class="list sortable sortable-init">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner"><div class="item-title">1. Перший елемент</div></div>
      </div>
      <div class="sortable-handler"></div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner"><div class="item-title">2. Другий елемент</div></div>
      </div>
      <div class="sortable-handler"></div>
    </li>
  </ul>
</div>

Керування режимом сортування через API 

// Увімкнути режим перетягування
app.sortable.enable('.sortable');

// Вимкнути режим перетягування
app.sortable.disable('.sortable');

// Перемикання стану
app.sortable.toggle('.sortable');

// Відстеження зміни порядку
$$('.sortable').on('sortable:sort', (e) => {
  console.log('Елемент переміщено з індексу ' + e.detail.from + ' на ' + e.detail.to);
});