Table Of Things

Table of things - маленькая библиотека для работы с Drag & Drop.

Особенности

• Не используются нативные Drag & Drop события
• Поддержка touch-событий
• 0 зависимостей
• Хорошие показатели в плане производительности

Установка

npm i tableofthings

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

<div id="table">
  <div id="thing-1"></div>
  <div id="thing-2"></div>
  <div id="thing-3"></div>
</div>

import ToT from 'tableofthings';

let a = new ToT.Table({
  el: document.getElementById("table"),
  thingsAutoDetect: true
})

После этого все дочерние (на 1 уровень) узлы #table будут хвататься мышкой (или пальцем) и перетаскиваться.

Все, что касается стилей, Вы можете настроить сами. Например, курсор-рука, которая сжимается в кулак при клике:

#thing-1 {
  cursor: grab;
}
#thing-1:active {
  cursor: grabbing;
}

Однако, некоторый CSS библиотека настраивает сама. Например, контейнер автоматически станет position: relative, а дочерние узлы position: absolute.

Более подробно

Table

Экземпляр Table создается с помощью соответствующего конструктора.

new ToT.Table({
  el: document.getElementById("table")
})

Опции конструктора:

Опция	Описание
el	Указывает DOM элемент для привязки
thingsAutoDetect	Автоматически создает экземпляры Thing из потомков el

Методы экземпляра:

Метод	Описание
mount(el)	Привязывает экземпляр к el
destroy()	Отвязывает экземпляр от el (ниже подробно)
on(type,callback)	Добавляет слушателя для события type, когда происходит событие type, вызывается колбэк callback
addThing(thing)	Добавляет Thing экземпляр к Table экземпляру
getDOM()	Возвращает привязанный el
getSize()	Возвращает размер этого экземпляра Table в пикселях [<w>, <h>]
getThings()	Возвращает массив всех экземляров Thing, которые были добавлены к этому экземпляру Table
getActiveThings()	Возвращает массив всех экземляров Thing, которые были добавлены к этому экземпляру Table, с которыми в данный момент ведется взаимодействие

Допускается создавать Table вот так:

let table = new ToT.Table()

Однако, чтобы работать с ним в дальнейшем необходимо вызвать table.mount(el) для привязки экземпляра Table к DOM. Также, можно вызвать table.destroy() для отвязки экземпляра Table. Под отвязкой подразумевается удаление слушателей событий, сброс установленных ранее стилевых настроек и так далее. Обычно, такое нужно использовать, когда Вы заканчиваете работу с Table.

Что касается событий - их пока всего два типа. dragstart срабатывает, когда пользователь начинает двигать объект, dragend - когда заканчивает.

Thing

Экземпляр Thing создается также с помощью соответствующего конструктора.

let thing = new ToT.Thing({
  el: document.getElementById("thing")
})

Но, как Вы могли видеть, можно передать thingsAutoDetect: true при создании экземпляра Table. Тогда все экземпляры Thing будут созданы автоматически из потомков элемента, к которому привязан ранее созданный экземпляр Table.

Кстати, чтобы сообщить экземпляру Table о созданном экземпляре Thing нужно использовать:

table.addThing(thing)

Опции конструктора:

Опция	Описание
el	Указывает DOM элемент для привязки
initialX	Начальное значение x
initialY	Начальное значение y

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

Методы экземпляра (почти такие же как и у Table):

Метод	Описание
mount(el)	Привязывает экземпляр к el
destroy()	Отвязывает экземпляр от el
on(type,callback)	Добавляет слушателя для события type, когда происходит событие type, вызывается колбэк callback
getPosition()	Возвращает положение этого экземпляра Thing в пикселях [<x>, <y>]
getSize()	Возвращает размер этого экземпляра Thing в пикселях [<w>, <h>]
getSpeed()	Возвращает скорость передвижения этого экземпляра Thing в пикс/сек [<v_x>, <v_y>]
getDOM()	Возвращает привязанный el

Работает все так же, как и с Table. Главное отличие - разный пэйлоад в событиях. В случае с Thing помимо tableRef, в событии будет также thingRef.

Демо

git clone https://github.com/yungvldai/tableofthings ToT-repo && cd ToT-repo
npm install && npm run start-demo