JQuery draggable get dropped location, not reverted position

Question

I'm trying to get the relative position of an draggable object in JQuery. Let's clarify it with some pictures first. Here's the start point of the script:

And let's say that i drop the first element here:

Then the top and left of the dropped element ( copy of original later ) should be top: 100px; left: 120px;

But they are 20px...

Here's the HTML i'm using:

<div id="toolbar">
    <div class="toolbar_content">
        <div id="holder_new_row_lr"></div>
        <div id="holder_new_row_ud"></div>
        <div id="holder_new_row_rl"></div>
        <div id="holder_new_row_du"></div>
    </div>
</div>
<div id="canvas"></div>

And the JS:

var x = 0;
var y = 0;
var wrapper = $("#canvas").offset();

$("#holder_new_row_lr").draggable({
    cursor: "crosshair",
    grid: [20, 20],
    revert: true,
    scope: "items",
    stop: function (event, ui) {
        // log("X: " + ui.position.left + " y: " + ui.position.top);
        var obj = $(this).clone();
        $(obj).css("position", 'absolute');

        log('Left:' + $(this).position().left + ' Top:' + $(this).position().left);
        $(obj).css("left", $(this).position().left);
        $(obj).css("top", $(this).position().left);

        // var Stoppos = $(this).position();
        // var left = Math.abs(Stoppos.left);
        // var top = Math.abs(Stoppos.top);
        // $(obj).css("left", ui.position.left);
        // $(obj).css("top", ui.position.top);

        // var currentPos = ui.helper.position();
        // var posLeft = parseInt(currentPos.left);
        // var posTop = parseInt(currentPos.top);
        // $(obj).css("left", posLeft);
        // $(obj).css("top", posTop);

        // $(obj).css("top", ui.position.top);
        // $(obj).css("left", ui.position.left);

        $("#canvas").append(obj);
    }
});

$("#canvas").droppable({
    scope: "items",
    drop: function (event, ui) {
        log("Dropped!");
        log(event);
    }
});

And the CSS for completeness...

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#toolbar {
    width: 100%;
    background-color: red;
    height: 100px;
}
#toolbar > .toolbar_content {
    padding:20px;
}
#toolbar > .toolbar_content > div {
    float:left;
    padding: 10px;
}
#holder_new_row_lr {
    background: url('row_lr.png') no-repeat;
    width:80px;
    height: 58px;
}
#holder_new_row_ud {
    background: url('row_ud.png') no-repeat;
    width:58px;
    height: 40px;
}
#holder_new_row_rl {
    background: url('row_rl.png') no-repeat;
    width:80px;
    height: 58px;
}
#holder_new_row_du {
    background: url('row_du.png') no-repeat;
    width:58px;
    height: 40px;
    background-position:left bottom;
}
#canvas {
    width: 100%;
    background-color: grey;
    /* Firefox */
    height: -moz-calc(100% - 100px);
    /* WebKit */
    height: -webkit-calc(100% - 100px);
    /* Opera */
    height: -o-calc(100% - 100px);
    /* Standard */
    height: calc(100% - 100px);
}

The problem is, that the element get's the coordinates of the element where it's set back to ( the dragged element reverts to it's starting place so that you can add another element, and another... )

So what i want is to get the coordinates of the drop place, not of the reverted place...

Sorry if this isn't totally clear. If you need more information, let me know.

Answer 1

To get the position the ui parameter of the stop event has position and offset properties. In this case offset would yield the proper result:

    var pos = ui.offset;

    log('Left:' + pos.left + ' Top:' + pos.top);
    $(obj).css("left", pos.left);
    $(obj).css("top", pos.top);