Используя jquery panzoom вместе с jquery, перетаскиваемым
Итак, у меня есть этот jquery .draggable
предметы, которые работают внутри .droppable
и .droppable
родитель использует JQuery .panzoom
, Существует также изображение для фона ведьма внутри .canvasimg
,
Вот дерево моей структуры HTML:
<div class="wrapper"> //panzoom
<div class="canvasimg">
<img src="somebackground">
</div>
<div class="droppable">
<div class="draggable">
</div>
<div class="draggable">
</div>
</div>
</div>
Что я имею:
У меня работает зум и draggable
работает тоже. Проблема в том, что когда я увеличиваю масштаб, перетаскиваемый объект должен находиться под мышью, но он как бы получает "истинную" позицию или исходную позицию, как вы предпочитаете.
Если я начну свое перетаскивание сверху слева от моего .droppable
при увеличении все начинается хорошо, элемент находится под мышью, вот так:
Но когда я пересекаю экран, элемент начинает "уходить" от мыши, чем больше я двигаюсь вправо и вниз, тем больше элемент удаляется от мыши, вот так:
Что я пробовал:
Чтобы реализовать ответ на этот вопрос, но так как я сохраняю позицию через ajax, я не очень уверен, как я могу его использовать, если ответ на этот вопрос находится в следующем коде:
var m = map.panzoom('getMatrix');
var zoom = Math.sqrt(m[0] * m[3]); // zoom don't change proportion and scale
var original = ui.originalPosition;
ui.position = {
left: (e.clientX - click.x + original.left) / zoom,
top: (e.clientY - click.y + original.top ) / zoom
};
Я пытался использовать его, но безуспешно.
что я думал:
Могу ли я инвертировать матрицу panzoom и использовать свойство трансформации css в перетаскиваемом элементе с матрицей опозита?
РЕДАКТИРОВАТЬ: Итак.. Я успешно реализовал этот код:
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
В моей функции, которая теперь получает положение элемента, область, которую я должен перетаскивать, уменьшается при увеличении масштаба.
Вероятно, я должен использовать подобный код в .droppable
дела. масштабировать.droppable так же, как он масштабирует.wrapper?
РЕДАКТИРОВАТЬ 2: Здесь создан вопрос об элементе.
1 ответ
Так что я успешно решил эту проблему, используя:
var realheight = $(".droppable").eq(0).height() * zoom;
var realwidth = $(".droppable").eq(0).width() * zoom ;
ui.position.top = ui.position.top / zoom ;
ui.position.left = ui.position.left / zoom;
ui.position.left - (ui.helper.outerWidth()/2)
xpos = (((parseFloat(ui.helper.css("left")) / realwidth) * 100) * zoom) * zoom ;
ypos = (((parseFloat(ui.helper.css("top")) / realheight) * 100) * zoom) * zoom ;
ui.helper.css({top : ypos+"%", left: xpos+"%"});