Jquery draggable with panzoom

Question

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

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