Угловой перетаскиваемый стол

Angular dragtable — это директива Angular, позволяющая изменять порядок столбцов таблицы.

Я искал похожее решение, включая библиотеки JavaScript, плагины jQuery или директивы Angular. Я тестировал различные решения, но ничего не работало так, как ожидалось. Поэтому я решил создать совершенно новую директиву.

Пакет доступен здесь.
А демоверсия доступна здесь.

Перетаскиваемые события Angular

Angular dragtable использует события drag. События перетаскивания существуют уже некоторое время и имеют довольно хорошую поддержку. Есть какие-то вопросы, но нет ничего нерешаемого. Следует отметить, что события drag не работают на мобильных устройствах. Хотя я думал о реализации мобильной поддержки с помощью событий касания или отличного плагина jQuery UI Touch Punch, в конце концов я сдался. Эта функция не имеет решающего значения на мобильных устройствах. Даже если бы я предоставил мобильную реализацию, использовать эту функцию было бы очень сложно.

Основная идея директивы Angular dragtable заключается в изменении порядка столбцов таблицы путем перетаскивания ячейки заголовка таблицы. Мы должны слушать, когда событие drag начинается и когда оно заканчивается. Когда происходит перетаскивание, мы должны отображать столбец плавающей таблицы призрак в качестве индикатора текущей позиции. Angular dragtable на самом деле содержит 2 директивы: одну для перетаскиваемых элементов и одну для удаляемых элементов. Полный код можно найти здесь.

Перетаскивание

Если мы хотим разрешить перетаскиваемые события в ячейке заголовка, мы должны добавить директиву drag-me, предоставив ее через имя атрибута. Существует 3 основных события drag:

dragstart — срабатывает при запуске события drag;
drag — срабатывает во время события drag;
dragend — срабатывает, когда заканчивается событие drag.

В событии dragstart мы хотим удалить все оставшиеся элементы призрака и создать новые элементы призрака для текущего столбца.
Фактическое перетаскивание вызывает событие drag, на котором мы хотите переместить столбец призрак при перемещении мыши. Всегда полезно установить тайм-аут для событий, которые происходят каждые несколько сотен миллисекунд.
И, наконец, мы будем использовать событие dragend для удаления столбца призрак.

Отбрасывание

Отбрасывание событий позволяет нам переупорядочивать столбцы, прослушивая, когда столбец призрак находится над текущим столбцом. Чтобы включить события droppable в ячейке заголовка, мы должны добавить директиву drop-me. Для этого мы должны использовать событие dragover. Это событие возникает, когда элемент draggable находится над элементом droppable.

В событии dragover мы хотим определить направление перетаскивания события и добавить столбец призрак до или после текущего столбца. Это означает, что нам не нужно прослушивать событие drop, потому что мы отвечаем живым действием на событие dragover. Это желаемый эффект, поскольку мы хотим избежать ненужных событий. Опять же, мы должны установить здесь время ожидания, как мы это сделали для события drag.

использование

Чтобы установить Angular dragtable, клонируйте репозиторий с Github или используйте установщик Bower: bower install angular-dragtable.

Включите Angular dragtable в свой проект.

(function (DemoApp) {
  'use strict';
  DemoApp = angular.module('DemoApp', ['Dragtable']);
  DemoApp.config(function () {});
}(this));

Чтобы разрешить изменение порядка ячеек заголовка таблицы, используйте директивы drag-me и drop-me.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th drag-me drop-me>Name</th>
      <th drag-me drop-me>Description</th>
      <th drag-me drop-me>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>Description 1</td>
      <td>1</td>
    </tr>
    ...
  </tbody>
</table>

Если вы хотите использовать собственный дескриптор для событий drag, вы должны указать селектор через атрибут data-handle.

<th drag-me drop-me data-handle=".my-handle">
  <span class="my-handle drag-icon"></span> Column name</div>
</th>

Обязательно поместите элемент дескриптора внутри ячейки заголовка.

Чтобы сделать Angular dragtable более производительным, особенно при использовании большой таблицы, мы должны использовать параметр data-limit. Если указан этот параметр, число элементов столбца фантом ограничено. Это означает меньше итераций во время события drag.

<th drag-me drop-me data-limit="50"><th>

Вывод

В этой статье я хотел подробно рассказать о процессе создания этой директивы Angular.

Мне очень понравилось его создавать, и я надеюсь, что вам понравится его использовать.

Поделитесь своими мыслями, комментируя эту статью или твитните меня.

Это сообщение изначально размещено на моем личном веб-сайте, зацените его.

Угловой перетаскиваемый стол