CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-events
keshu_vats
keshu_vats

Reputation: 442

Stop dragging at a point

I am creating a cover image for my PHP project. I want to make it like Facebook That i can upload cover of size greater than the desired cover size then I want to drag the cover up-down-left-right to let user re position it and set according to him-self. At this movement I am able to drag photo but I want to stop dragging if the image ends. Like user is dragging the image to left then the image should automatically stop dragging if the end point of the div matched to the end point of div. I am not getting proper sentence to describe this. I am uploading a fiddle that will show what I am wanting I don't want to show white background (may this sentence explains the example).

Demo Fiddle : http://jsfiddle.net/keshu/HC927/1/

$(document).ready(function(){
    $( ".cover_image" ).draggable();
});

Upvotes: 4

Views: 313

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You use the containment option and check to mantain the image inside its bounds, it allows you to:

Constrains dragging to within the bounds of the specified element or region.

Multiple types supported:

Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.

Element: The draggable element will be contained to the bounding box of this element. String: Possible values: "parent", "document", "window".

Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

Code:

$(document).ready(function () {
    $(".cover_image").draggable({
        containment: [
        $(window).width() - $(".cover_image").width(),
        $(window).height() - $(".cover_image").height(),
        0,
        0]
    });
});

Demo: http://jsfiddle.net/8ZBPA/

Upvotes: 5

Related Questions