jQuery UI - Draggable w/ live coordinates

by lasha

HTML

<div id="nonDraggable"></div>
<div id="draggable">
    <div class="count">               
</div>

CSS

#nonDraggable {
    width: 150px;
    height: 150px;
    background-color: #cecece;
    cursor: move;
}

#draggable {
    width: 150px;
    height: 150px;
    background-color: red;
    cursor: move;
}

JavaScript

$("#draggable").draggable({
    containment: "#container",
    scroll: false,
    drag: function() {
        var $this = $(this);
        var thisPos = $this.position();
        var parentPos = $this.parent().position();
        
        var x = thisPos.left - parentPos.left;
        var y = thisPos.top - parentPos.top;
        
        $this.text(x + ", " + y);
    }
});