Как привязать перетаскиваемые объекты к сетке? (Material UI)

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь создать карту с возможностью перетаскивания, которая накладывается поверх сетки, и при перемещении я хочу, чтобы она привязывалась к разным разделам Grid . Я могу создать сетку со столбцами и строками, а также перетаскиваемый элемент, но я не уверен, snap to grid возможно ли это с Material UI. Есть ли способ сделать это с помощью Material UI и ReactJS?

Если это невозможно с Material UI, есть ли другая зависимость, которую я могу использовать для достижения этой цели?

Ответ №1:

Я использовал много библиотек перетаскивания, но эта мне нравится больше всего. Вы можете попробовать.

На есть демо-версия сборника рассказовhttps://bokuweb.github.io/react-rnd/stories/?path=/story/grid—both. Я думаю, что это отлично решит вашу проблему.

Ответ №2:

react-dnd совместим с Material UI и позволяет создавать слой перетаскивания и привязывать к сетке.

Смотрите react-dnd базовую демонстрацию здесь

И вот как вы можете расширить его на такие вещи, как: привязка, ограничения сетки, рендеринг произвольных дочерних компонентов, изменение порядка дочерних элементов