title: Jquery Ui Draggable How to get Id of div dragged started in
body: <p>I'm dragging and dropping divs between outer container divs and need to get the id of the outer div that the drag started in. 
  I'm doing this by saving <code>$(this.parentNode).attr('id')</code> on the drag start event.</p>
  
  <p>The first time I drag something this gives the expected div id but on subsequent drags of the same div this id is not correct.</p>
  
  <p>Any ideas please?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage&lt;DragDropTrial.Models.LemonCollection&gt;" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"&gt;
  
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
      &lt;script type="text/javascript"&gt;
  
      $(function() {
          var origleft;
          var origtop;
          var origZ;
  
          // Make lemons image draggable
          $("img.lemons").draggable({
                 start: function(event, ui) {
                 origleft = event.clientX;
                 origtop = event.clientY;
                 origZ = $(this.parentNode).attr('id');
                 },
                  cursor: "move"
              });
  
          // Make dish div droppable
          $("#dish").droppable({
              drop: function(event, ui) {
                  saveDropDetails(ui.draggable.attr('id'), $(this).attr('id'), ui.absolutePosition.top, ui.absolutePosition.left, origleft, origtop, origZ);
              }
          });
          // Make table div droppable
          $("#table").droppable({
              drop: function(event, ui) {
                  saveDropDetails(ui.draggable.attr('id'), $(this).attr('id'), ui.absolutePosition.top, ui.absolutePosition.left);
              }
          });
          });
  
      function saveCoords(left, top, dragId) {
          alert("{dragId is : '" + dragId + "',left is : '" + left + "',,top is : '" + top + "'}");
      }
      function saveDropDetails(dragId, dropId, dropPosTop, dropPosLeft, origleft, origtop, origZ) {
          alert("dragId is : " + dragId + ",dropId is : " + dropId + ",dropPosTop is : " + dropPosTop + ",dropPosLeft is : " + dropPosLeft + " origTop is " + origtop + " origLeft is " + origleft + " originZ is " + origZ);
      }
  &lt;/script&gt;
  
  &lt;h2&gt;Drag and drop the lemons&lt;/h2&gt;
  
      &lt;div id = "table" style = "background-color:Blue"&gt;TABLE
            &lt;%foreach (var aLem in Model.Table)    
            { %&gt;
               &lt;img id = "&lt;%=aLem.LemonId %&gt;", alt ="&lt;%=string.Format("Lemon{0}", aLem.LemonId) %&gt;" src="../../Images/extract.png" style ="padding-left:25px" class = "lemons" /&gt;
  
          &lt;%} %&gt;
  
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
  
      &lt;div id = "dish" style = "background-color:Gray" &gt;DISH
      &lt;p&gt;&lt;/p&gt;
            &lt;%foreach (var aLem in Model.Dish)    
            { %&gt;
               &lt;img id = "&lt;%=aLem.LemonId %&gt;", alt ="&lt;%=string.Format("Lemon{0}", aLem.LemonId) %&gt;" src="../../Images/extract.png" style ="padding-left:25px" class = "lemons" /&gt;
  
          &lt;%} %&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p></p>