У меня есть приложение React, где мне нужно реализовать поведение копирования при перетаскивании. В частности, когда пользователь перетаскивает элемент, я хочу, чтобы он перетаскивал копию элемента вместо самого элемента.
Обычно это было бы довольно просто, но в моем конкретном случае c я перетаскиваю элемент external в дерево, содержащее все мои состояния React.
В Чтобы обойти проблему, я попробовал следующее:
Когда пользователь наводит указатель мыши на элемент, который нужно перетаскивать (onPointerEnter), я уведомляю компонент перетаскивания для создания элемента Portal по координатам цели перетаскивания. Таким образом, когда пользователь фактически начинает перетаскивать элемент, он в конечном итоге перетаскивает вновь созданный элемент портала вместо исходного элемента, над которым он завис.
Этот прием отлично работает для мышиных устройств ввода, но, к сожалению, не работает на сенсорных устройствах. В сенсорных устройствах событие «onPointerEnter» представляет собой дискретное событие, поскольку пользователь проводит пальцем по элементу, а не перетаскивает указатель. В конечном итоге происходит то, что когда пользователь касается элемента, создается элемент портала, но для currentTarget события все еще устанавливается исходный элемент позади него, и, таким образом, пользователь не может ничего перетаскивать, пока не поднимет палец и не положит его на недавно созданный элемент.
Существуют ли другие способы реализации нужного мне режима копирования при перетаскивании? В идеале я бы хотел как-то «перехватить» событие касания / перетаскивания. То есть, когда пользователь перетаскивает элемент, я вставляю компонент Portal в это место, которое затем становится новым currentTarget события. Есть какой-либо способ сделать это? Можно ли изменить цель события перетаскивания на новый элемент?