Получить положение относительно родительского объекта упал Jquery UI

Question

Я возникли проблемы с перетащить & падение JQuery UI:

У меня есть этот HTML:

<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> - Я хочу, чтобы быть включенным в йоте для сНа # наряда-области и пролет должен быть включен в этих дела.

posLeft и posTop получает только относительное значение от исходного положения от перетаскиваемого элемента.

Как получить позицию отбрасываемого элемента относительно новой родительской области?

Есть ли альтернативный способ сделать это? Я googled вокруг, и я могу найти много подобных вопросов, но не этот конкретный. Я, вероятно, отсутствует что-то очень очевидное, но потом дать мне некоторые указатели :-)

UPDATE: (прибывает Новый вопрос) Я нашел проблему. Это было на самом деле 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;