React-Dnd - как управлять положением предпросмотра перетаскивания относительно курсора и получать местоположение перетаскивания относительно цели перетаскивания - PullRequest
0 голосов
/ 01 февраля 2020

Я пытаюсь создать приложение для планирования ресурсов, где вы можете перетащить элемент задачи из одного списка в сетку. Строки сетки представляют «ресурс» (человека), а столбцы представляют время суток (разбитые на 15-минутные интервалы). Я добился хорошего прогресса с помощью React-Dnd, но есть некоторые раздражающие проблемы с UX, которые я изо всех сил пытаюсь решить. Первый - предварительный просмотр перетаскивания. Я хотел бы использовать пользовательский компонент в качестве предварительного просмотра перетаскивания. Документация React-Dnd объясняет, как это сделать. Но я не могу понять, как заставить предварительный просмотр располагаться так, чтобы курсор находился в верхнем левом углу предварительного просмотра. Причина этого в том, что пользователю понятно, куда они действительно бросают эту вещь. Предположим, пользователь хочет оставить задачу в 13:00. Естественно, они могут попытаться выровнять левый край предварительного просмотра с левым краем столбца «1:00 pm». Но если мышь на самом деле находится над столбцом «1:30 вечера», то именно здесь она будет отброшена. Я думаю, что этой проблемы можно избежать, просто поместив курсор мыши на верхний левый край предварительного просмотра перетаскивания. Возможно ли это?

Другая связанная с этим проблема заключается в том, что в идеале мне бы хотелось узнать координаты места сбрасывания относительно строки «Вид», в которую оно было сброшено. Я работал с iOS в течение последних 2 лет, поэтому я думаю о системе координат на iOS. Может быть, такое мышление не относится к DOM, я не знаю. Но если есть какой-то способ узнать x-положение капли относительно левого края самой строки (не страницы или экрана), то я могу выяснить, какой столбец (то есть, какой интервал времени суток) вещь была брошена на

Возможно ли сделать это с помощью React-Dnd (или любых других библиотек React drag & drop)?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...