перетаскивание элементов на основе процентного соотношения в элемент сдерживания

Вот как это выглядит;

$( "#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);
    }
});

Пользователь перетаскивает $( "#box ul li" ) и перетаскивает его на элемент $(".door"). И добавляет его к элементу $(".door") с помощью селектора $(".item").

Я использую jquery UI - Draggable для перетаскивания элементов. Здесь нет проблем.

Вот собственно вопрос;

Но когда вы начинаете перетаскивать элемент, функция меняет позицию элемента слева и сверху, например: top:10px слева :10px. Но я хочу перетащить элемент на основе процента в элемент сдерживания. Так должно быть верх:10%; слева:10%.

есть идеи, как это сделать?