所以我在.draggable
内部使用了这个jquery .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
的左上角开始拖动,它就会启动,该元素位于鼠标下方,如下所示:
但是当我浏览屏幕时,元素开始从鼠标“离开”,我越往右走,越多的元素离开鼠标,就像这样:
我尝试了什么:
要在this问题上实现答案,但由于我通过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的矩阵并使用oposite矩阵在可拖动项目中使用css transform属性吗?
修改 所以..我成功实现了这段代码:
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
在我的函数中,获取元素的位置现在,当我放大时,我必须拖动项目的区域减少..
可能我必须在.droppable
div中使用类似的代码。缩放.droppable,因为它缩放.wrapper?
编辑2: 创建了有关商品here的问题。
答案 0 :(得分: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+"%"});