Question

I have an image inside a div, like so:

<div><img src="" class="draggable"></div>

It’s a draggable image, through jQuery UI. Now I want to determin how much the image is moved on the x-axis, so I can use that info to save the position of the image.

I.E. If the image is moved 100px left, x should be “-100px”, and if it’s moved to the right it should be “100px”..

I can use this, but it only determin how much the image was moved, not in a specific direction:

drag: function() {
                counts[ 1 ]++;
                updateCounterStatus( $drag_counter, counts[ 1 ] );
            },

Whats the solution ?

Thanks,
Jakob

Answer 1

Easy, if you want to save the image position when you stop dragging the image. Simply just check left and top of the image on stop:

stop: function(event, ui) { 
    var topValue = $(this).position().top;
    var leftValue = $(this).position().left;
    //Save them to wherever you want
}

jQuery UI’s draggable isn’t doing anything magic, if you inspect it in Firebug or Chrome Dev Toolbar you will see that all it does is to alter the left and top property of the element.

More information about the different events that Draggable have: http://jqueryui.com/demos/draggable/#events