Search code examples
javascriptjquerycssjquery-uidraggable

Draggable jQuery Restriction

I'm trying to scroll an image by dragging my cursor. I'm using the Draggable jQuery library but I'm having a problem.

I need to determine the limit of the image so that I can block the drag to avoid showing white space.

Example 1

Anyone can help me with that?

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

  • If you need scrolling by dragging, do not use dragging. Use simple mouse move instead. Look at the example below. In this case you can scroll any content inside your container. Hope it would help.

    UPDATED: If you need dragging of some background element, you should to drag it by mousemove and calculate visible area according to container size.

    So, in few words - Drag image left till its width minus left offset is bigger than container(window) width, and so on for right, top and down offsets.

    // 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/