CODEWITHSUNDEEP
javascriptjqueryhtml
user3287771
user3287771

Reputation: 113

Draggable jquery function inside div positions

I am using a Jquery a script to drag images (currently only one image) around inside a div. I am currently using this code:

    var offset = 0,
        xPos = 0,
        yPos = 0;

$(document).ready(function(){
    $(".item").draggable({
        containment: '#house_wall1',

        drag: function(){
            offset = $(this).position();
            xPos = offset.left;
            yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        },

        // Find original position of dragged image.
        start: function(event, ui) {
            // Show start dragged position of image.
            var Startpos = $(this).position();
            $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
        },

        // Find position where image is dropped.
        stop: function(event, ui) {
            // Show dropped position.
            var Stoppos = $(this).position();
            $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
        }
    });
});

My problem is not that the draggable images is not inside the div, my problem is that the positions x and y is calculated from the screen sizes and not the div. That means if you resize the screen or have a lower screen resolution, the images will in fact hold a different x and y position than a person with another resolution. How can I change the image positions to track x and y from the div margins instead of the screens size. Thanks in advance.

Upvotes: 0

Views: 367

Answers (1)

techfoobar
techfoobar

Reputation: 66673

Use position() instead of offset(). position() gives you the top/left w.r.t. to the element's parent element instead of the document top/left.

offset = $(this).position();

Upvotes: 1

Related Questions