How to get the position of a draggable object

Question

I'm trying to get the x and y of the draggable object using jQuery.

The scenario is, I'm dragging and dropping an object onto another object and want to get the position of the drag & drop object.

Edit: Now I can get the position of the object but I need more:

Here is what I've tried:

<script>
$(function() {
    $('#draggable').draggable({
        drag: function() {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).text('x: ' + xPos + 'y: ' + yPos);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
});
</script>

Now I can get the position of the draggable object but I need it to be resizable and in addition to getting x,y of the draggable, I also need the size of it.

Answer 1

You can use the drag event:

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

JS Fiddle demo.

This demo brought to you by the drag event, and the methods offset() and text().

---

Edited in response to comment from OP, to original question:

David, actually what I need is a bit more complicated but you might do great help. What I want to do is to put a draggable object and a droppable image in a panel and drag the draggable object on the image and get the position of where it was dropped. I'll also need the draggable object to be resizable and get the size of it at the end too :) thank you

...uh, whoah...

I think this sort of covers the basics of what's asked for:

$('#dragThis').draggable( {
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX').text('Final X: ' + finalxPos);
        $('#finalY').text('Final X: ' + finalyPos);
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

Updated JS Fiddle demo.

Newly-updated JS Fiddle demo, featuring revert: invalid, so dropping the draggable div anywhere but the droppable div will cause the draggable to animate back to its starting position. If that'd be appreciated. Or desired at all...

To address the requirement for the draggable object to be resizable as well, I don't think that this is possible, since both draggable() and resizable() respond to the same interaction. It may be possible, in some way, but it's currently beyond my ken, I'm afraid.

---

Edited to add in the 'height/width' requirement, and also to tidy up a few things and improve the CSS. That said:

HTML:

<div id="dragThis">
    <ul>
        <li id="posX">x: <span></span></li>
        <li id="posY">y: <span></span></li>
        <li id="finalX">Final X: <span></span></li>
        <li id="finalY">Final Y: <span></span></li>
        <li id="width">Width: <span></span></li>
        <li id="height">Height: <span></span></li>
    </ul>
</div>

<div id="dropHere"></div>

CSS:

#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

#dragThis span {
    float: right;
}

#dragThis span:after {
    content: "px";
}

li {
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 1.2em;
}

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

jQuery:

$('#dragThis').draggable({
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX > span').text(xPos);
        $('#posY > span').text(yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX > span').text(finalxPos);
        $('#finalY > span').text(finalyPos);
        $('#width > span').text($(this).width());
        $('#height > span').text($(this).height());
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

JS Fiddle demo, of the above.

Answer 2

You can try one of these:

$(this).position()

or

$(this).offset()

The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document.

From http://api.jquery.com/position/

Answer 3

You can get the width output with .resizable() and stop event. Try adding this:

$('#dragThis').resizable({ handles: "e, w",      
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    $('#width > span').text($(this).width());
    $('#height > span').text($(this).height());
      }
   });