How does Facebook edit profile picture thumbnails?

I'm developing a mini gallery and need to edit thumbnails as facebook does. Is it possible with Jquery? drag an area with a specific container开发者_JAVA百科 and get top and left coordinates, I just want to get the coordinates.

please give me some idea, thanks

Have you tried Jcrop?

Using jQuery Draggable UI: http://jsfiddle.net/antonysastre/j9UUm/10/

Basically using a containment on the draggable element that is dynamically calculated and hidden with overflow.

In short:

The HTML

<div class="body">
    <div class="thumbnail">
        <div class="containment">
            <div class="image"><img src="http://lorempixel.com/200/260/fashion" /></div>
        </div>
    </div>
</div>​

The Javascript

$(document).ready(function() {
    $('.thumbnail .containment img').each(function() {
        var height = $(this).height();
        var overflow = (height - 160); // Using explict value here for now.
        var containerHeight = (overflow * 2) + 160; // And also here.
        var containerTop = Math.abs(overflow) * -1;
        $(this).parents('.containment').css({'top': containerTop});
        $(this).parents('.containment').css({'height': containerHeight});
    })

    $('.image').draggable({
        containment: 'parent',
        axis: 'y'
    });
});​

The CSS

.containment { position: relative; }
.thumbnail {
    width: 160px;
    height: 160px;
    position: relative;
    overflow: hidden;
}
.thumbnail .image { position: relative; }
.thumbnail img { max-width: 160px; }​