У меня есть HTML-элемент, к которому применен jquery.panzoom. Этот элемент представляет собой перетаскивающий контейнер, в который пользователи могут перетаскивать элементы из меню и помещать их в него.
Когда что-то сбрасывается в этот контейнер, отброшенный элемент должен отображаться точно в том месте, где было выполнено наведение мыши (сброса). Это все работает нормально, когда масштаб контейнера установлен на 1.
Однако, когда в качестве масштаба используется любое другое значение, кроме 1, позиция (координаты событий x и y) в приемнике отбрасывания «преобразуется», и элемент отображается в позиции события относительно «масштабирования» контейнера.
Я понимаю, что это происходит потому, что плагин panzoom использует css transform для создания эффекта панорамирования и масштабирования, как показано ниже
<div class="canvas" ondrop="canvasVM.dropHandler($event)" ondragover="canvasVM.dragoverHandler($event);" style="transform: matrix(0.5, 0, 0, 0.5, 0, -1); transform-origin: 50% 50% 0px;">
и это преобразование применяется и к вновь перетаскиваемому элементу.
Есть ли способ отменить преобразование для этого отброшенного элемента, чтобы получить исходную позицию события отбрасывания? Или есть способ вычислить позицию в контейнере, где мог бы быть элемент, если бы в нем не было преобразования?
Любая помощь очень ценится.