Jquery draggable with panzoom

Question

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.

can you posy your relevant portion of JS/HTML? – prasun Nov 21 '15 at 05:32 — prasun, Nov 21 '15 at 05:32
Have you solved this issue? – Aboodred1 Jun 30 '16 at 17:41 — Aboodred1, Jun 30 '16 at 17:41
Have you solved this issue? No. – Kaushik solanki Aug 30 '16 at 06:28 — Kaushik solanki, Aug 30 '16 at 06:28

score 2 · Answer 1 · edited May 23 '17 at 12:00

I'm not sure but perhaps I found answer.

Here two point:

Don't move background while dragging object
Scale cursor movement according to background scale

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;
    });

You can find complete example [here](http://sgeproject.narod.ru/node/panzoom.zip). I add some Chrome stupid fix. In Chrome `mousemove` triggered for map instead map object. I suspect that it's collision between `z-index` and `transform` properties. — Aikon Mogwai, Feb 06 '17 at 03:55
@AikonMogwai When I run this, and zoom in on the map then move the draggable it's position is off. My cursor is in one spot and the circle is up and left from it. Also, when my mouse is over a blue and I'm zoomed in on the map more of the map is shown. Any ideas what's going on there? — user441521, Feb 24 '17 at 21:45

score 0 · Answer 2 · edited Aug 12 '20 at 08:21

Here you are. I'm using browser js. Draggable of jquery UI and 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();
  },
});

Jquery draggable with panzoom

2 Answers2

Linked