可拖拽jQuery限制

Question

我試圖通過拖動光標來滾動圖像。我使用可拖動的jQuery庫，但我遇到問題。

我需要確定圖像的限制，以便我可以阻止拖動以避免顯示空白區域。

任何人都可以幫我嗎？

jsfiddle

<div style="width:100%;height:100%;" id="parent"> 
<img src="http://cdn.wallpapersafari.com/10/37/Aim58J.jpg" id="draggable"/> 

$("#draggable").draggable({ 
    axis: 'x,y', 
    cursor: "crosshair", 
}); 

Answer 1

如果您需要通過拖動滾動，不使用拖動。改用簡單的鼠標移動。看下面的例子。在這種情況下，您可以滾動容器內的任何內容。 希望它會有所幫助。

已更新： 如果需要拖動一些背景元素，您應該通過mousemove拖動它並根據容器大小計算可見區域。

因此，用幾句話 - 拖動圖像，直到它的width減去left offset大於container(window) width，依此類推，右，上和下偏移。

// Main script 
function run() { 
    var $image = $('#draggable'); 
    var $window = $(window); 
    var isStarted = false; 
    var cursorInitialPosition = {left: 0, top: 0}; 
    var imageInitialPosition = {left: 0, top: 0}; 
    var imageSize = {width: $image.width(), height: $image.height()}; 

    // stop dragging 
    var stop = function() { 
     isStarted = false; 
     $window.unbind('mousemove', update); 
    }; 

    // update image position 
    var update = function(event) { 
     // size of container (window in our case) 
     var containerSize = {width: $window.width(), height: $window.height()}; 
     var left = imageInitialPosition.left + (event.pageX - cursorInitialPosition.left); 
     var top = imageInitialPosition.top + (event.pageY - cursorInitialPosition.top); 

     // don't allow dragging too left or right 
     if (left <= 0 && imageSize.width + left >= containerSize.width) { 
      $image.css('left', left); 
     } 

     // don't allow dragging too top or down 
     if (top <= 0 && imageSize.height + top >= containerSize.height) { 
      $image.css('top', top); 
     } 
    }; 

    $window.mousedown(function(event){ 
     var position = $image.position(); 

     cursorInitialPosition.left = event.pageX; 
     cursorInitialPosition.top = event.pageY; 

     imageInitialPosition.left = position.left; 
     imageInitialPosition.top = position.top; 

     $(window).mousemove(update); 
    }); 
    $window.mouseout(stop); 
    $window.mouseup(stop); 
} 

$(function(){ 
    // wait for image loading because we need it size 
    var image = new Image; 
    image.onload = run; 
    image.src = "http://cdn.wallpapersafari.com/10/37/Aim58J.jpg"; 
}); 

https://jsfiddle.net/2hxz49bj/5/