使用jQuery panzoom旁边的jQuery可拖动

所以我有这个jQuery .draggable项目的.droppable内工作和.droppable父使用jQuery的.panzoom。 .canvasimg里面还有一个背景女巫的图片。使用jQuery panzoom旁边的jQuery可拖动

这里是我的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的矩阵，并使用CSS变换属性在拖动项目与oposite矩阵？

编辑： 所以..我成功地实施这样的代码：

ui.position.top = Math.round(ui.position.top/zoom); 
ui.position.left = Math.round(ui.position.left/zoom);

在我的功能得到现在的元素，我要拖到项目区域的位置降低了，因为我放大..

可能我必须在.droppable股利用类似的代码。在缩放.wrapper时扩展.droppable？

编辑2： 创建了一个关于该项目here的问题。

来源

2017-03-01 Miguel Machado

我注意到，您尚未接受你的其他问题的任何答案。当答案有帮助时，您可能会考虑这样做。它会增加你的声誉，并奖励那些帮助你的人。你可以通过点击它旁边的勾号来接受答案 –

哦谢谢你Scandrett。我应该做到了 –

你回答了你的问题吗？如果没有，我会建议可能包装放大的元素，并使包装可拖动。 – Twisty

因此，我已成功解决了使用这个问题：

 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+"%"});

来源

2017-03-20 10:58:36

使用jQuery panzoom旁边的jQuery可拖动

回答

相关问题