CODEWITHSUNDEEP
jqueryjquery-ui
anosim
anosim

Reputation: 73

Make image draggable but fit exactly parent containment

i want to know how work facebook new timeline image reposition with jquery?

this example is similar to facebook image dragging but this is not working with image size limit: http://oneblackbear.com/draggable/index.html

i want same facebook image reposition code.

Thanks

Upvotes: 4

Views: 2778

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

Try this demo!

$(".image_drag img").draggable({

    stop: function(ev, ui) {
        var hel = ui.helper, pos = ui.position;
        //horizontal
        var h = -(hel.outerHeight() - $(hel).parent().outerHeight());
        if (pos.top >= 0) {
            hel.animate({ top: 0 });
        } else if (pos.top <= h) {
            hel.animate({ top: h });
        }
        // vertical
        var v = -(hel.outerWidth() - $(hel).parent().outerWidth());
        if (pos.left >= 0) {
            hel.animate({ left: 0 });
        } else if (pos.left <= v) {
            hel.animate({ left: v });
        }
    }

});

Or you can set manually the containment for your element:

jsBin demo

$("img").draggable({ containment: [-99, -119, 0, 0], scroll: false });

Upvotes: 5

Related Questions