How can I get the id's of a draggable and droppable element when using jquery UI? - jquery-ui

Question

I am trying to use the code below to trigger an ajax request when I drop a dragged element, but it doesn't work. I think it's because I'm not actually getting the id's, but I'm not sure.
HTML:
<div class="draggable">item 1</div>
<div class="draggable">item 2</div>
...
<div class="droppable">drop location 1</div>
<div class="droppable">drop location 2</div>
...
jQuery:
$(document).ready(function() {
$(".draggable").draggable({cursor: 'move', helper: 'clone'});
var ID1 = $(".draggable").attr(id);
var ID2 = $(".droppable").attr(id);
$(".droppable").droppable({
drop: function() {
$.ajax({
type: "POST",
url: 'www.mydomain.com/'+ID1+'/'+ID2,
dataType: 'html',
success: function(){}
});
return false;
}
});
});

Answer 1

ajon's answer is not quite right - both ID1 and ID2 relate to the target (where the dragged element has been dropped), whereas the question asks for id's of both dragged and dropped elements.
given modified html of (as per question but with added id's for all elements)
<div class="draggable" id="item1">item 1</div>
<div class="draggable" id="item2">item 2</div>
...
<div class="droppable" id="drop1">drop location 1</div>
<div class="droppable" id="drop2">drop location 2</div>
...
this javascript should work:
$(document).ready(function() {
$(".draggable").draggable({cursor: 'move', helper: 'clone'});
$(".droppable").droppable({
drop: function(event, ui) {
var dragID = ui.draggable.attr('id');
var dropID = event.target.id; // or $(this).attr("id"), or this.id
$.ajax({
type: "POST",
url: 'www.mydomain.com/'+dragID+'/'+dropID,
dataType: 'html',
success: function(){}
});
return false;
}
});
});
ps - you are also doing an ajax POST but with no posted data - I assume that was removed from the question. If you are just hitting the url and passing the 2 id's as shown then a straight GET would suffice.
$.get('www.mydomain.com/'+dragID+'/'+dropID, function(data) {
..
});

Answer 2

The way you are trying to get the id is invalid. You are using the class selector . which will return all objects of the given class. In your example you have 2+ of each class (draggable and droppable).
Secondly, those elements don't have ids so .attr(id) would return null (I think).
Third, you don't have quotes around id which means it would be interpreted as a variable which hasn't been set.
Lastly, to get the id, you can get it using event.target.id in the drop function.
Try the following:
<div class="draggable" id="item1">item 1</div>
<div class="draggable" id="item2">item 2</div>
...
<div class="droppable" id="drop1">drop location 1</div>
<div class="droppable" id="drop2">drop location 2</div>
...
Then:
$(document).ready(function() {
$(".draggable").draggable({cursor: 'move', helper: 'clone'});
$(".droppable").droppable({
drop: function(event, ui) {
var ID1 = event.target.id;
var ID2 = $(this).attr("id");
$.ajax({
type: "POST",
url: 'www.mydomain.com/'+ID1+'/'+ID2,
dataType: 'html',
success: function(){}
});
return false;
}
});
});