title: JQuery droppable, when list item is dropped, unable to get 'id' attribute using attr()
body: <p>My problem is similar to the below link</p>
  
  <p><a href="https://stackoverflow.com/questions/6274984/how-to-get-the-dropped-items-id-on-drop-event-jquery">How to get the dropped item&#39;s id on drop event jquery</a></p>
  
  <p>However I am dragging and dropping a list item, each contain images. </p>
  
  <p>When the list item is dropped, I need to get the 'id' attribute, which will then be passed to php on 'submit', to update the database. </p>
  
  <p>But the below code does not seem to be capturing the 'id' attribute or if i try 'src', I have amended the following</p>
  
  <pre><code>$("#drop").text(id); to $("#drop").text("image has been dropped");
  </code></pre>
  
  <p>which does display correctly,  "image has been dropped" upon a drop event, so the problem seems to be with getting the 'id' attribute within a list item? I tried adding a class called 'image' to use instead of the list item, tried many things, but makes no difference!</p>
  
  <p>Hope someone can point me in the right direction! </p>
  
  <p>Thanks</p>
  
  <p>below is my code</p>
  
  <p>JQuery</p>
  
  <p>$(document).ready(function() {</p>
  
  <pre><code>    $("#item-slider li").draggable({
          containment: 'document',
          revert: true,
          helper: "clone",
          cursor: "move"
      });
  
  
      $("#drop").droppable({
          accept: "#item-slider li",
          drop: function (event, ui){
              var draggable = ui.draggable;
              var id = draggable.attr("id");
              $("#drop").text(id);
          }
      });
  
  });
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;div id="item-slider"&gt;
  &lt;ul&gt;
      &lt;li class='image'&gt;&lt;img src="./images/jeans1.jpeg" id="jeans1.jpeg" /&gt;&lt;/li&gt;
      &lt;li class='image'&gt;&lt;img src="./images/top2.jpg" id="top2.jpg" /&gt;&lt;/li&gt;
      &lt;li class='image'&gt;&lt;img src="./images/top1.jpg" id="top1.jpg" /&gt;&lt;/li&gt;
      &lt;li class='image'&gt;&lt;img src="./images/shoes3.jpg" id="shoes3.jpg" /&gt;&lt;/li&gt;
      &lt;li class='image'&gt;&lt;img src="./images/dress1.jpg" id="dress1.jpg" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="drop"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>