title: How can I get the id's of a draggable and droppable element when using jquery UI?
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="draggable"&gt;item 1&lt;/div&gt;
  &lt;div class="draggable"&gt;item 2&lt;/div&gt;
  ...
  
  &lt;div class="droppable"&gt;drop location 1&lt;/div&gt;
  &lt;div class="droppable"&gt;drop location 2&lt;/div&gt;
  ...
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(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;
       }
    });
  });
  </code></pre>