jQuery与panzoom可拖动 [英] Jquery draggable with panzoom
本文介绍了jQuery与panzoom可拖动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在用女巫制作一个页面,所有内容都使用panzoom缩放.问题是,当我在页面中拖动某些内容时,拖动项的位置不好.
I am working on a page in witch all its contents are scaled by using panzoom. The problem is that when I drag something in the page the dragging item gets a bad position.
推荐答案
我不确定,但也许我找到了答案.
I'm not sure but perhaps I found answer.
这里有两点:
- 拖动对象时请勿移动背景
- 根据背景比例缩放光标移动
在我的缩放背景代码下方,将对象移到其上方. 根据此答案
Below my code for zoomed background and move object over it. Scale cursor based on this answer
html
<script src = "/js/vendors/jquery-ui.min.js"></script>
<script src = "/js/vendors/jquery.panzoom.min.js"></script>
<div id = "map-viewport">
<div id = "map">
<div class = "draggable">1</div>
<div class = "draggable">2</div>
</div>
</div>
js
var map = $('#map');
var viewport = $('#map-viewport');
map.panzoom({
increment: 0.1,
minScale: 1,
contain: 'invert'
});
viewport.on('wheel', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
map.panzoom('zoom', zoomOut, {
increment: 0.2,
animate: false,
focal: e.originalEvent
});
});
var click = { x: 0, y: 0};
$('.draggable')
.draggable({
containment: 'parent',
start: function(e) {
click.x = e.clientX;
click.y = e.clientY;
},
drag: function(e, ui) {
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
};
}
})
.on('mousedown', function(e){
e.stopImmediatePropagation();
return false;
});
这篇关于jQuery与panzoom可拖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文