ドラッグ可能なjQueryの制限

Question

カーソルをドラッグして画像をスクロールしようとしています。 Draggable 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/