How do I get the coordinate position after using jQuery drag and drop?
I just made something like that (If I understand you correctly).
I use he function position() include in jQuery 1.3.2.
Just did a copy paste and a quick tweak... But should give you the idea.
// Make images draggable.
$(".item").draggable({
// 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);
}
});
<div id="container">
<img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" />
<img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" />
<img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" />
</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
Had the same problem. My solution is next:
$("#element").droppable({
drop: function( event, ui ) {
// position of the draggable minus position of the droppable
// relative to the document
var $newPosX = ui.offset.left - $(this).offset().left;
var $newPosY = ui.offset.top - $(this).offset().top;
}
});
None of the above worked for me.
Here's my solution- works great:
$dropTarget.droppable({
drop: function( event, ui ) {
// Get mouse position relative to drop target:
var dropPositionX = event.pageX - $(this).offset().left;
var dropPositionY = event.pageY - $(this).offset().top;
// Get mouse offset relative to dragged item:
var dragItemOffsetX = event.offsetX;
var dragItemOffsetY = event.offsetY;
// Get position of dragged item relative to drop target:
var dragItemPositionX = dropPositionX-dragItemOffsetX;
var dragItemPositionY = dropPositionY-dragItemOffsetY;
alert('DROPPED IT AT ' + dragItemPositionX + ', ' + dragItemPositionY);
(Based partly off solution given here: https://stackoverflow.com/a/10429969/165673)
This worked for me:
$("#element1").droppable(
{
drop: function(event, ui)
{
var currentPos = ui.helper.position();
alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top));
}
});