title: Get position relative to parent dropped object Jquery UI
body: <p>I'm having an issue with drag &amp; drop jQuery UI:</p>
  
  <p><strong>I have this html:</strong></p>
  
  <pre><code>&lt;div class="outfit-wrapper"&gt;
  
      &lt;div id="outfit-area"&gt; &lt;!-- drop to this area --&gt;
          &lt;div class="outfits"&gt; &lt;!--store images (and content) in this div --&gt;
          &lt;/div&gt; 
  
          &lt;div class="toolbox-area"&gt; &lt;!-- functions (buttons) for outfit-area --&gt;
              &lt;img src="forward.png" class="button forward" alt="forward outfit" /&gt; &lt;!--forward selected outfitimage up (zindex +1), button-class for positioning--&gt;
              &lt;img src="backward.png" class="button backward" alt="backward outfit"/&gt; &lt;!--backward selected outfitimage down (zindex -1), button-class for positioning --&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  
      &lt;div id="products-area"&gt; &lt;!-- drag from this area --&gt;
          &lt;!-- examples products --&gt;
          &lt;div class="ui-draggable"&gt;prod1&lt;/div&gt; 
          &lt;div class="ui-draggable"&gt;prod2&lt;/div&gt;
          &lt;div class="ui-draggable"&gt;prod3&lt;/div&gt;
          &lt;div class="ui-draggable"&gt;prod4&lt;/div&gt;
          &lt;div class="ui-draggable"&gt;prod5&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt; &lt;!--end outfit-wrapper--&gt;
  </code></pre>
  
  <p><strong>And this jQuery-code:</strong></p>
  
  <pre><code>$(document).ready(function(){
  
  //Drag FROM - area
  $( "#products-area .ui-draggable" ).draggable({
      helper: "clone",
      containment: ".outfit-wrapper", 
      option: "stack",//Comes over everything other objects when dragged
      revert: "invalid" //Revert will only occur if the draggable has not been dropped on a droppable.
  });
  
  //Drop TO - area
  $( "#outfit-area").droppable({
  
      accept: "#products-area .ui-draggable", //Must come from this dragged element
      drop: function( event, ui ) {
  
          //Put content from dragged object into of a new &lt;span&gt; n #outfit-area
          var currentPos = ui.helper.position();
          var posLeft = parseInt(currentPos.left);
          var posTop = parseInt(currentPos.top);
  
          var draggedObj = ui.draggable.html(); //Get HTML-content of draggable
  
          //Add a span and a div
          var newContent = '&lt;div class="outfit" style="position:absolute;left:' + posLeft + 'px;top:' + posTop + 'px;"&gt;'+draggedObj;
          newContent = newContent + '&lt;span class="close-outfit"&gt;X&lt;/span&gt;'; //Add a close-button for each dragged content
          newContent = newContent + '&lt;/div&gt;';
  
          $(this).find(".outfits").append(newContent); //HOWTO: Get relative position of 
  
  
      }
  });
  
  
  }); //End onready (DOM is loaded)
  </code></pre>
  
  <p><strong>What I want to do is:</strong></p>
  
  <p>When a user drags the <code>&lt;div class="ui-draggable"&gt;prod{nr}&lt;/div&gt;</code> - I want it to be included in the dom for the div <strong>#outfit-area</strong> and a span should be included into that div.</p>
  
  <p>posLeft and posTop only gets the value relative from the original position from the dragged element.</p>
  
  <p><strong>How do I get the get position of dropped element relative to the new parent #outfit-area</strong> ? </p>
  
  <p>Is there an alternative way of doing this? I've googled around and I can find a lot of similar questions, but not this particular one. I'm probably missing something very obvious, but then give me some pointers :-)</p>
  
  <p><strong>UPDATE:</strong> (New question arrives)
  I've found the problem. It was actually a CSS-issue:</p>
  
  <p><strong>My css:</strong></p>
  
  <pre><code>.outfit-wrapper {position:relative;height:800px;width:100%;}
  #outfit-area {position:relative;float:left;margin-right:50px;width:300px;height:200px;border:1px solid #000000;}
  .outfits {position:absolute;width:100%;height:100%;}
  .toolbox-area {position:absolute;top:0;right:0;height:40px;width:60px;border:1px solid #ff0000;}
  
  #products-area div {display:block;float:left;width:40px;}
  #products-area {float:left;width:300px;height:200px;border:1px solid #000000;background:red;}
  </code></pre>
  
  <p>When setting position:relative on #products-area:</p>
  
  <pre><code>#products-area {position:relative;float:left;width:300px;height:200px;border:1px solid #000000;background:red;}
  </code></pre>
  
  <p>The dragged element returns the wrong positions when dropped. <strong>Why?</strong></p>