Question

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.

Answer 1

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.