jquery - dragging items based on percentage to containment element

Question

Here is what it looks like;

$( "#box ul li" ).draggable({
    helper: "clone"
});
$( ".item" ).draggable({containment: ".door"});

$( ".door" ).droppable({
    accept: ":not(.ui-sortable-helper, .item)",
    drop: function( event, ui ) {
       $( "<div class='item'></div>" ).html(ui.draggable.find("img")).appendTo(this);
    }
});

User drags the $( "#box ul li" ) element and drops it on $(".door") element. And it appends it to $(".door") element with $(".item") selector.

I am using jquery UI - Draggable to drag and drop items. There is no problem there.

Here is the actual question;

But when you start dragging the element, the function changes the element's left and top positions like; top:10px left:10px. But i want to drag the item based on percentage to the containment element. It should be top:10%; left:10%.

any idea on how to do this?

Answer 1

I've found a solution;

$( ".item" ).draggable({
  containment: ".door",
  stop: function( event, ui ) {
   $(this).css("left",parseInt($(this).css("left")) / ($(".door").width() / 100)+"%");
   $(this).css("top",parseInt($(this).css("top")) / ($(".door").height() / 100)+"%");
  }
});