獲取相對位置父刪除對象jQuery UI的

Question

我遇到阻力&下降jQuery UI的一個問題

：

我有這個網站：

<div class="outfit-wrapper"> 

    <div id="outfit-area"> <!-- drop to this area --> 
     <div class="outfits"> <!--store images (and content) in this div --> 
     </div> 

     <div class="toolbox-area"> <!-- functions (buttons) for outfit-area --> 
      <img src="forward.png" class="button forward" alt="forward outfit" /> <!--forward selected outfitimage up (zindex +1), button-class for positioning--> 
      <img src="backward.png" class="button backward" alt="backward outfit"/> <!--backward selected outfitimage down (zindex -1), button-class for positioning --> 
     </div> 
    </div> 

    <div id="products-area"> <!-- drag from this area --> 
     <!-- examples products --> 
     <div class="ui-draggable">prod1</div> 
     <div class="ui-draggable">prod2</div> 
     <div class="ui-draggable">prod3</div> 
     <div class="ui-draggable">prod4</div> 
     <div class="ui-draggable">prod5</div> 
    </div> 

</div> <!--end outfit-wrapper--> 

這jQuery的代碼：

$(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 <span> 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 = '<div class="outfit" style="position:absolute;left:' + posLeft + 'px;top:' + posTop + 'px;">'+draggedObj; 
     newContent = newContent + '<span class="close-outfit">X</span>'; //Add a close-button for each dragged content 
     newContent = newContent + '</div>'; 

     $(this).find(".outfits").append(newContent); //HOWTO: Get relative position of 


    } 
}); 


}); //End onready (DOM is loaded) 

我想要做的是：

當用戶拖動<div class="ui-draggable">prod{nr}</div> - 我希望它被包含在DOM的DIV ＃裝面積和跨度應納入該專區。

posLeft和posTop只從被拖動元素的原始位置獲取相對值。

我該如何獲得相對於新父母＃掉落區域的下落元素的獲取位置？

有沒有其他的方法呢？我一直在搜索，我可以找到很多類似的問題，但不是這個問題。我可能錯過了一些非常明顯的東西，但後來給我一些指示:-)

更新：（新問題到達） 我發現了這個問題。它實際上是一個CSS-問題：

我的CSS：

.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;} 

當設置位置：在＃產品面積相對：

#products-area {position:relative;float:left;width:300px;height:200px;border:1px solid #000000;background:red;} 

拖動的元素會返回錯誤的位置時，下降。 爲什麼？

Answer 1

您是否試過在放下後獲取實際元素的位置？

var pos = ui.draggable.position(); 
var posLeft = pos.left; 
var posTop = pos.top;