Div Image Placement with drag and drop

0

Good morning, what I'm trying to do is a system where the user uploads an image and has a preview of how the image will be positioned in div and can move to the position you think is best.

It's basically the same thing as the Facebook cover update, where you upload an image and place < in> drag and drop, the way you want it!

I would like to know if you have any plugin jQuery for this, or is there any way to do it without plugin, anyway, ideas? :)

Update:

The most I did, but did not get the result I wanted, was by using the JCrop plugin to do something like preview example, but as I said, this is not what I'm looking for, but rather the direct positioning in div , without cutting it.

    
asked by anonymous 30.01.2015 / 16:15

1 answer

1

I found this jQuery plugin , lightweight and easy to use (requires the jQuery UI because of drag ).

You can initialize it like this:

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

It saves the vertical position of the image when it is dragged in the parameter input of the plugin.

I do not know what to do next, but I'll leave a tip:
create a <input type="hidden" id="position"> to save the value and then you can save it in a DB or somewhere else to adjust the position when the user returns to that page, using% CSS% or the background-position parameter of the plugin. / p>     

30.01.2015 / 16:55