Jquery перетаскивается с Panzoom

Question

Я работаю на странице, где все ее содержимое масштабируется с помощью Panzoom. Проблема в том, что когда я перетаскиваю что-то на странице, перетаскиваемый элемент занимает плохую позицию.

Answer 1

Я не уверен, но, возможно, я нашел ответ.

Здесь два момента:

• Не перемещайте фон при перетаскивании объекта
• Масштабировать движение курсора в соответствии с фоновым масштабом

---

Ниже моего кода увеличенный фон и наведите на него объект. Масштабировать курсор на основе этого ответа

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

Answer 2

Вот, пожалуйста. Я использую браузер js. Перетаскивание jquery UI и Panzoom

ссылка на код

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