Stop dragging to point

Question

I am creating a cover for my php project. I want to do it like Facebook. I can load a cover larger than the desired cover size, then I want to drag the cover up, down, left, and right to allow the user to reinstall it and set it to fit it. With this movement, I can drag the photo, but I want to stop dragging if the image ends. Just as the user drags the image to the left, the image should automatically stop dragging if the endpoint of the div matches the endpoint of the div. I do not receive a proper offer to describe this. I download a fiddle that will show what I want, I don’t want to show a white background (can this sentence explain an example)

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

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

Answer 1

You use the containment option and check if the image supports within its borders, it allows you to:

Drag constants within the specified element or region.

Several types are supported:

Selector The draggable element will be contained in the bounding box of the first element found by the selector. If no items are found, no restriction will be set.

Item . The draggable element will be contained in the bounding box of this element. Line: Possible values: "parent", "document", "window".

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

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