Image positioning in div with drag and drop

Question

Good morning, what I’m looking to do is, a system where the user upload of an image and have a preview of how the image will be positioned in the div, may move it to the position it deems best.

It’s basically the same thing as the cover update Facebook, where you do upload of an image and positions, through drag and drop, the way you want it!

I wonder if you have any plugin jQuery for that, or if there is any way to do without plugin, anyway, ideas? :)

Update:

The most I could, but I didn’t get the result I wanted, was using the jcrop plugin to do something similar to the example of preview, but as I said, this is not exactly what I’m looking for, but the direct positioning in the div, without needing cutting.

Answer 1

I found this plugin in jQuery, very light and easy to use (needs jQuery UI because of drag).

You can initialize it like this:

$('#img').imagedrag({
    input: "#position" // output da position
    position: "middle" // posição inicial
});

He saves the position vertical image when dragged in parameter input of the plugin.

I don’t know what you plan to do later, but I’ll leave you a hint:
creates a <input type="hidden" id="position"> to save the value and then you can save it in a BD or other place to adjust the position when the user goes back to that page, using background-position CSS or the parameter itself position of the plugin.