title: jQuery draggables - get id of dragable
body: <p><strong>Solution Found!</strong>
  I found it, I was overlooking that I could just get the id of the variable item. So I put <code>var item_id = item.attr('id');</code> and that was my solution. So much simpler than I thought. Thanks for your help everyone!</p>
  
  <p>Okay, so I have multiple draggable elements in jQuery, they are all images, but each one has their own ID. Anyway, I have set up a function that is preformed once the image is dropped onto the droppable. I want to be able to pull the id of the image so I may process what image has been dropped in my database.</p>
  
  <pre><code>function foundationsInSpot(drag_item,spot)
  {
  var oldSpotItem = $(spot).find('img');
  if(oldSpotItem.length&gt;0) {
      oldSpotItem.appendTo('#foundationinv').draggable({ revert: 'invalid' });
  }
  var item = $('&lt;img /&gt;');
  var item_id = "";
  var bid = "&lt;?= $bid ?&gt;";
  item.attr('src',drag_item.attr('src')).attr('id',drag_item.attr('id')).attr('class',drag_item.attr('class')).appendTo(spot).draggable({ revert: 'invalid' });
  drag_item.remove();
  alert('BenID: ' + bid + ' Foundation: ' + item_id);
  var dataString = 'item_id='+ item_id + '&amp;bid=' + bid;  
      $.ajax({
          type: "POST",
          data: dataString,
          url: "http://motb.isgreat.org/objects/pfoundations.php",
      });
  }
  </code></pre>
  
  <p>So that's my code. I need to find <code>item_id</code>. Here was my guess <code>var item_id = $('&lt;img /&gt;').attr('id');</code> but it returned blank information. I also tried <code>var item_id = ui.draggable.attr("id");</code> and that just stopped the rest of my function. Any ideas? Thanks in advance.</p>
  
  <p>By the way here is how my draggable items look like.
  <code>&lt;img src='http://motb.isgreat.org/objects/khhhqw4s.png' class='object foundation' id='khhhqw4s'/&gt;</code></p>
  
  <p><strong>UPDATE</strong>
  I moved the <code>var item_id = ui.draggable.attr("id");</code> above the if statement, and now I get <code>undefined</code>. So I am unsure where to go from here, but I am aware my AJAX call is operating correctly as it is updating my database with <code>undefined</code>.</p>
  
  <p><strong>UPDATE - Again</strong></p>
  
  <p>So here is how I am calling my function if this makes it easier.</p>
  
  <pre><code>    $(".foundations").draggable({ revert: 'invalid'}).addTouch;
  $('#foundationinv').droppable({accept: '.foundations'});
  $("#foundations").droppable({ accept: '.foundations'})
  $('#foundations,#foundationinv').bind('drop', function(ev,ui) { foundationsInSpot(ui.draggable,this); });
  </code></pre>
  
  <p>I have never done anything like this before, so It's really beyond me. If you would like to see the page in person, go to <a href="http://motb.isgreat.org/" rel="nofollow">http://motb.isgreat.org/</a> and click the login button, and use <strong>testbot</strong> for both the username and the password. To see where the draggables are, on the left side there is this big box with 4 smaller ones below it, click above the small box where the word is foundations. I am trying to drag those objects that appear into the small box. You can see an alert with the information I am trying to pass. Feel free to check my source for any issues, the items are called up from my database, so my PHP is probably missing from your source.</p>
  
  <hr>
  
  <p>I found it, I was overlooking that I could just get the id of the variable item. So I put var <code>item_id = item.attr('id');</code> and that was my solution. So much simpler than I thought. Thanks for your help everyone!</p>