Jquery 可通过 panzoom 拖动

Posted 2023-05-07

【中文标题】Jquery 可通过 panzoom 拖动

【英文标题】：Jquery draggable with panzoom

【发布时间】：2016-02-23 17:31:23

【问题描述】：

我正在处理一个页面，它的所有内容都使用 panzoom 进行缩放。问题是当我在页面中拖动某些东西时，拖动的项目位置不好。

【问题讨论】：

你能写出你的 JS/html 相关部分吗？

这个问题你解决了吗？

你解决了这个问题吗？没有。

【参考方案1】：

我不确定，但也许我找到了答案。

这里有两点：

拖动对象时不要移动背景 根据背景比例缩放光标移动

---

在我的代码下方，用于缩放背景并将对象移动到上面。 根据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;
    );

【讨论】：

你可以找到完整的例子here。我添加了一些 Chrome 愚蠢的修复。在 Chrome 中 mousemove 触发地图而不是地图对象。我怀疑这是z-index 和transform 属性之间的冲突。

@AikonMogwai 当我运行此程序并放大地图然后移动可拖动的位置时，它的位置已关闭。我的光标在一个位置，圆圈在它的上方和左侧。此外，当我的鼠标悬停在蓝色上并且我在地图上放大时，会显示更多的地图。有什么想法吗？

【参考方案2】：

给你。我正在使用浏览器js。 jquery UI 和 Panzoom 的可拖动性

codepen link

var viewport = $('.frame');
var $pz = $('.panzoom');
$pz.panzoom(
  minScale: .8,
  maxScale: 3,
  onPan: function() 
    //  console.log('pan');
  ,
  onStart: function(event) 
    //  console.log('start', event);
    return true;
  ,
);

$('.item').draggable(
  helper: 'clone',
  appendTo: '.workspace',
  zIndex: 100505,
  stop: function(event, ui) 
    event.target.remove();
  ,
);