Реагируйте на DnD, создавая dropTargets при наведении курсора на элемент

Question

Я пытаюсь сделать что-то вроде ниже:

Сценарий 1: пользователь будет перетаскивать список 1 с левой стороны на правую сторону.

Сценарий 2: Опять же, пользователь будет перетаскивать список 2 вправо, когда этот перетаскиваемый элемент находится в списке 1, необходимо отобразить зоны перетаскивания, чтобы сбросить этот элемент списка 2 здесь.

Наконец, Список 1 и Список 2 будут расположены как слева и справа.

С React Dnd, Это достижимо? и я попробовал это работает только при перетаскивании. https://stackblitz.com/edit/react-pctpdh

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

Ниже приведен примерработа, я должен достичь:

Необходимо показать заполнитель, чтобы уронить предмет, при наведении на него других предметов. (Нужно создавать динамические цели, пока мышь наводит какой-то предмет)

Мне нужна помощь по этому вопросу, чтобы реализовать эту функцию. Любая идея по этому поводу действительно заслуживает похвалы.

Answer 1

Я видел фрагмент кода и добавил новый код, который копирует желаемое поведение.

Идея состоит в том, чтобы создать отдельный компонент для обработки действий перетаскивания, который можно использовать повторно, когда это необходимо. В этом конкретном случае я выбираю использование компонента внутри компонента ListItem для создания двух зон перетаскивания с обеих сторон.

Вот обновленный код: https://stackblitz.com/edit/react-pctpdh