Стиль CSS для реализации плавающего меню, следующего за перетаскиваемым объектом. ⇐ CSS

[Anonymous]

Сейчас я работаю над проектом клонирования canva с использованием React и TailwindCSS. Скажем, у меня есть структура, как показано ниже:

Код: Выделить всё

This is for the floating menu
This is the element that the floating menu follows

Внешний относительный элемент div — это страница, на странице содержатся элементы (фигуры, текстовые поля), которые можно перетаскивать.
Я намерен сделать так, чтобы положение плавающего меню было следующим и фиксировалось выше. элемент (так же, как меню в канве, где вы можете скопировать или удалить элемент).
До сих пор положение плавающего меню просто оставалось на одном месте, несмотря на то, что оно было сгруппировано с помощью элемент div. Я подозреваю, что это связано с тем, что позиция элемента div установлена ​​абсолютной.
Я пробовал сделать контейнер гибким и столбцом направления следующим образом:

Код: Выделить всё

This is for the floating menu
This is the element that the floating menu follows

Но это не работает.
Я думал о том, чтобы сделать плавающее меню абсолютным, а затем расположить его сверху и слева в зависимости от положения элемента, но это не идеально, не говоря уже о том, когда размер элемента изменяется, положение плавающего меню не обновляется должным образом.
Интересно, есть ли какой-нибудь другой подход? Спасибо


Подробнее здесь: https://stackoverflow.com/questions/786 ... ble-object