jquery-ui在放大的容器上拖動操作在第一次鼠標移動時跳轉

Question

我創建了一個包含兩個小子div的容器。我讓容器和子div可拖動。孩子如預期的那樣阻止拖動。當縮放比率爲1.0時，外部容器會按照預期拖動，但當放大時，拖動操作會在容器第一次移動時跳轉。還有一些其他相關的問題和可能的答案，但我試過的問題只能修復子容器而不是父容器的問題。

特別是，我已經嘗試了所有在這裏的建議：jQuery Drag/Resize with CSS Transform Scale

我審閱了：jQuery UI Draggable jumps at the first drag它沒有有用的答案。

的jsfiddle這裏：http://jsfiddle.net/nigelt/w521gv0j/5/

HTML：

<!-- Create an area where we will allow items to be moved --> 
<div id=mycontainer>Press '+' to zoom in, '-' to zoom out, 'r' to reset. 
    <br>This pane is draggable 
    <!-- create a couple of boxes --> 
    <div class="mybox" id="source">Draggable</div> 
    <div class="mybox" id="dest">Draggable</div> 
</div> 

CSS：

#mycontainer { 
    width: 600px; 
    height: 400px; 
    background: #ddd; 
    position: absolute; 
    top: 0; 
    left: 0; 
    float: none; 
    border: solid 1px; 
} 
.mybox { 
    position: absolute; 
    background: #fff; 
    border: 1px solid; 
    border-radius: 6px; 
    width: 100px; 
    height: 75px; 
    float: none; 
    text-align: center; 
} 
#source { 
    top: 50px; 
    left: 100px; 
} 
#dest { 
    top: 100px; 
    left: 250px; 
} 
body { 
    margin: 0px; 
    /* force mycontainer to edge */ 
    overflow: hidden; 
    /* no scrolling of body area. Clip the contents if moved */ 
} 

的javascript：

// global to set the zoomscale 
zoomScale = 1; 

// Set the zoom scale 
var setZoomScale = function (zoom) { 
    zoomScale = zoom; 

    var container = $("#mycontainer"); 
    var scaleval = 'scale(' + zoom + ',' + zoom + ')'; 
    container.css('-ms-transform', scaleval); 
    container.css('-webkit-transform', scaleval); 
    container.css('transform', scaleval); 
} 

// Make the boxes draggable 
// apply the stackoverflow fix 
$("#source, #dest").draggable({ 
    start: function (event, ui) { 
     ui.position.left = 0; 
     ui.position.top = 0; 
    }, 
    drag: function (event, ui) { 
     // drag handle fix 
     var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left 
     var newLeft = ui.originalPosition.left + changeLeft/((zoomScale)); // adjust new left by our zoomScale 

     var changeTop = ui.position.top - ui.originalPosition.top; // find change in top 
     var newTop = ui.originalPosition.top + changeTop/zoomScale; // adjust new top by our zoomScale 

     ui.position.left = newLeft; 
     ui.position.top = newTop; 

    } 
}); 

// make the virtual window draggable 
// apply the stackoverflow fix 
$("#mycontainer").draggable({ 
    start: function (event, ui) { 
     ui.position.left = 0; 
     ui.position.top = 0; 
    }, 
    drag: function (event, ui) { 
     // drag handle fix 
     var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left 
     var newLeft = ui.originalPosition.left + changeLeft/((zoomScale)); // adjust new left by our zoomScale 

     var changeTop = ui.position.top - ui.originalPosition.top; // find change in top 
     var newTop = ui.originalPosition.top + changeTop/zoomScale; // adjust new top by our zoomScale 

     ui.position.left = newLeft; 
     ui.position.top = newTop; 
    }, 
    stop: function (event, ui) {} 
}); 

// add a keypress handler so we can change the zoom 
$(document).keypress(function (ev) { 
    var key = String.fromCharCode(ev.charCode); 
    if (key == '+') { 
     setZoomScale(zoomScale *= 1.5); 
    } else if (key == '-') { 
     setZoomScale(zoomScale /= 1.5); 
    } else if (key == 'r') { 
     // reset 
     setZoomScale(1.0); 
     $("#mycontainer").css({ 
      "top": 0, 
       "left": 0 
     }); 
    } 
}); 

setZoomScale(1.5); 

在小提琴，變焦比最初瑟t至1.5。要將其重置爲1.0，請將焦點設置到演示窗口並按'r'。之後，容器拖動工作正常

Answer 1

那麼，最後，它需要更多的時間來創建小提琴並寫出問題比找到答案。這篇文章：Jquery draggable with zoom problem完美解決了我的問題。

我的小提琴修改後的代碼：

var pointerX; 
var pointerY; 
$("#mycontainer").draggable({ 
    start: function(evt, ui) { 
     pointerY = (evt.pageY - $('body').offset().top)/zoomScale - parseInt($(evt.target).css('top')); 
     pointerX = (evt.pageX - $('body').offset().left)/zoomScale - parseInt($(evt.target).css('left')); 
     //console.log('pointer: ' + pointerX + ',' + pointerY); 
    }, 
    drag: function(evt,ui) { 
     var canvasTop = $('body').offset().top; 
     var canvasLeft = $('body').offset().left; 
     var canvasHeight = $('body').height(); 
     var canvasWidth = $('body').width(); 
     //console.log('canvas: ' + canvasLeft + ',' + canvasTop + ' ' + canvasWidth + 'x' + canvasHeight); 

     // Fix for zoom 
     ui.position.top = Math.round((evt.pageY - canvasTop)/zoomScale - pointerY); 
     ui.position.left = Math.round((evt.pageX - canvasLeft)/zoomScale - pointerX); 

     // Check if element is outside canvas 
     if (ui.position.left < 0) ui.position.left = 0; 
     //if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width(); 
     if (ui.position.top < 0) ui.position.top = 0; 
     //if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height(); 

     // Finally, make sure offset aligns with position 
     ui.offset.top = Math.round(ui.position.top + canvasTop); 
     ui.offset.left = Math.round(ui.position.left + canvasLeft); 
    }, 
    stop: function(event, ui) { 
    } 
});