Javascript 可拖动jQuery限制

我正试图通过拖动光标来滚动图像。我正在使用可拖动的jQuery库，但我遇到了一个问题

我需要确定图像的限制，以便我可以阻止拖动以避免显示空白

有人能帮我吗

---

如果需要通过拖动滚动，请不要使用拖动。使用简单的鼠标移动代替。看看下面的例子。在这种情况下，您可以滚动容器中的任何内容。 希望能有帮助

更新： 如果您需要拖动一些背景元素，您应该通过mousemove拖动它，并根据容器大小计算可见区域

所以，简单地说，将图像向左拖动，直到其宽度减去左偏移量大于containerwindow宽度，然后依次拖动右偏移量、上偏移量和下偏移量

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

---

谢谢你的回答。这个脚本的问题是它移动了整个页面，我需要一个不受移动影响的静态元素。例如：[link]。有什么建议吗？你也可以把它改编成jquerydraggable，主要思想是一样的。这正是我需要的。谢谢

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

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