jQuery - Holen Sie sich die relative Position und das Attribut der gelöschten Elemente

Question

Ich habe ziehbare Elemente, die in abwerfbaren Bereichen fallen gelassen werden können. Wenn ein Element gelöscht wird, wird die drop Funktion aufgerufen:

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

Mein ziehbar Element:

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

Was muss ich wissen, wenn das Element fallen gelassen wird, ist der Wert von data-noteid und die relative Position der abwerfbare Bereich. Wenn also das Element in der oberen linken Ecke abgelegt wird, müssen die x/y-Koordinaten 0/0 sein.

habe ich ein voll funktionierendes Beispiel hier: http://jsbin.com/utivo5/2/

So normalerweise kann ich die Attribute wie folgt zugreifen:

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

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

aber alles, was ich in diesem Fall erhalten, ist undefined.

Weiß jemand, wie ich auf sie zugreifen kann? Ich denke, es muss mit event oder ui möglich sein, die ein Parameter der aufgerufenen drop Funktion ist ?!

Vielen Dank im Voraus & Mit freundlichen Grüßen, Tim.

Answer 1

In diesem Fall möchten Sie das ui Argument die ziehbare erhalten, anstatt this, die sich auf den abfallbaren Bereich bezieht, speziell ui.draggable hier. Es sollte wie dieses Gesamt aussehen:

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)); 
} 

Für die Position, müssen wir die abwerfbaren Top/linke Position subtrahieren Sie den Wert, den Sie hier erhalten möchten, das ist die dPos oben entfernt zu werden.

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

Answer 2

Ich fand für meine Umstände, dass das obige nicht funktioniert. Nicht sicher, warum - es gab mir immer ein X = -7 und Y = 229.

Aber das tat der Arbeit (in Drop-Handler):

alert('X pos in drop parent container = ' + (ui.position.top - $(this).offset().top));