JQuery draggable get dropped location, not reverted position -

JQuery draggable get dropped location, not reverted position -

i'm trying relative position of draggable object in jquery. let's clarify pictures first. here's start point of script:

and let's drop first element here:

then top , left of dropped element ( re-create of original later ) should top: 100px; left: 120px;

but 20px...

here's 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 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 css 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, element get's coordinates of element it's set ( dragged element reverts it's starting place can add together element, , another... )

so want coordinates of drop place, not of reverted place...

sorry if isn't totally clear. if need more information, allow me know.

to position ui parameter of stop event has position , offset properties. in case offset yield proper result:

var pos = ui.offset; log('left:' + pos.left + ' top:' + pos.top); $(obj).css("left", pos.left); $(obj).css("top", pos.top);

jquery jquery-ui coordinates draggable