Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - get relative position and attribute of dropped elements

I have draggable elements which can be dropped in droppable areas. If an element is dropped, the drop function is called:

$('#droppable').droppable({
    scope: "items",
    drop: function (event, ui) {
        // this one is called if an element is dropped in this droppable area
    }
});

My draggable element:

<div class="drag" data-noteid="10">Drag me</div>
...
$('.drag').draggable({
    revert: "invalid",
    scope: "items"
});

What I need to know if the element is dropped is the value of data-noteid and the relative position of the droppable area. So, if the element is dropped on the upper left corner, the x/y coordinates must be 0/0.

I created a full working example here: http://jsbin.com/utivo5/2/

So normally I can access the attributes like this:

alert($(this).data("noteid"));

alert($(this).position().top);
alert($(this).position().left);

but all I get in this case is undefined.

Do anyone know how I can access them? I think it must be possible with event or ui which is a parameter of the called drop function?!

Thank you in advance & Best Regards, Tim.

like image 496
Tim Avatar asked Jan 03 '11 11:01

Tim


2 Answers

In this case you want the ui argument to get the draggable, rather than this which refers to the droppable area, specifically ui.draggable here. It should look like this overall:

drop: function (event, ui) {
  var pos = ui.draggable.offset(), dPos = $(this).offset();
  alert("nodeid: " + ui.draggable.data("noteid") + 
        ", Top: " + (pos.top - dPos.top) + 
        ", Left: " + (pos.left - dPos.left));
}

For the position, we need to subtract the droppable's top/left position to get the value you want here, that's the dPos above getting removed.

You can test your demo with the above changes working here.

like image 182
Nick Craver Avatar answered Sep 20 '22 16:09

Nick Craver


I found for my circumstances that the above didn't work. Not sure why - it always gave me an X = -7 and Y = 229.

But this did work (located in drop function handler):

alert('X pos in drop parent container = ' + (ui.position.top - $(this).offset().top));
like image 31
Nick Wright Avatar answered Sep 22 '22 16:09

Nick Wright