使用jquery panzoom和jquery draggable

时间:2017-03-01 18:49:08

标签: javascript jquery jquery-ui draggable jquery.panzoom

所以我在.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的左上角开始拖动,它就会启动,该元素位于鼠标下方,如下所示: starting drag from top left

但是当我浏览屏幕时,元素开始从鼠标“离开”,我越往右走,越多的元素离开鼠标,就像这样: element getting off the mouse area

我尝试了什么:

要在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的问题。

1 个答案:

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