Как использовать функцию перетаскивания столбцов и строк в моей таблице React - ReactJS

Я создал таблицу в React Table. Я хочу добавить функцию перетаскивания для столбцов и строк. Как я могу это сделать?

Вот мой образец CodeSandbox - https://codesandbox.io/s/2wp7jk23kr

Здесь у меня есть песочница кода для перетаскивания строк - https://codesandbox.io/s/1844xzjvp7

Здесь у меня есть песочница кода для столбцов перетаскивания - https://codesandbox.io/s/5vxlnjrw1n

Поскольку я новичок в React, я не могу интегрировать эти три песочницы. Может ли кто-нибудь создать хороший пример на CodeSandbox о том, как добавить функцию перетаскивания для столбцов и строк?

Используйте столбцы данных моей таблицы React - https://codesandbox.io/s/2wp7jk23kr


reactjs javascript react-table
person tommy123    schedule 17.12.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Сделать это несложно, но пока нет удобного способа, попробовал и посмотрим результат в песочнице: https://codesandbox.io/s/quizzical-leakey-o5h8z

Тогда посмотрим, что происходит в Table.js

1. Когда вы начинаете перетаскивать, вы не знаете, в каком направлении оно движется, поэтому я просто скрываю фрагмент (установив для него пустой div)

2. Когда вы сначала перетаскиваете его в другую ячейку, я узнаю направление, а затем фиксирую направление внутри dragState.direction

3. Когда вы перетаскиваете его в ячейку (в том числе в первый раз на шаге 2), вам нужно показать измененные данные, например rows = offsetIndex(dragState.row, dragState.dropIndex, rows), обратите внимание, что они разные, в зависимости от dragState.direction

4. Мы выделяем перетаскиваемую строку / столбец с помощью opacity: .....

5.Наконец, при перетаскивании мы уведомляем родительский компонент об изменениях.

Это еще недостаточно хорошо, особенно когда сопротивление ослаблено. Так что не слишком полагайтесь на этот код, найдите свой собственный путь, основанный на этой идее.

person Josh Lin    schedule 08.11.2019