arrastrando elementos en función del porcentaje al elemento de contención

Question

Esto es lo que parece;

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

usuario arrastra el $ ("#box ul li") elemento y lo deja caer en $ ("puerta") elemento. Y lo agrega al elemento $ (". Door") con el selector $ (". Item").

Estoy usando jquery UI - Arrastrable para arrastrar y soltar elementos. No hay problema allí.

Aquí está la pregunta real;

Pero cuando comienza a arrastrar el elemento, la función cambia las posiciones izquierda y superior del elemento; arriba: 10px a la izquierda: 10px. Pero quiero arrastrar el artículo en función del porcentaje del elemento de contención. Debe ser arriba: 10%; izquierda: 10%.

¿alguna idea sobre cómo hacer esto?

Answer 1

He encontrado una solución;

$(".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)+"%"); 
    } 
}); 

Answer 2

Prueba este Código:

$(".element").draggable({ 

    stop: function(){ 
    var l = (100 * parseFloat($(this).css("left"))/parseFloat($(this).parent().css("width")))+ "%" ; 
    var t = (100 * parseFloat($(this).css("top"))/parseFloat($(this).parent().css("height")))+ "%" ; 
    $(this).css("left" , l); 
    $(this).css("top" , t); 
    } 

}); 

Answer 3

Little bit versión actualizada de todo lo anterior:

$('.element').draggable({ 
    containment: 'parent', 
    stop: function(event, ui) { 
     var $elm = $(this); 
     var pos = $elm.position(), 
      parentSizes = { 
       height: $elm.parent().height(), 
       width: $elm.parent().width() 
      }; 

     $elm.css('top', ((pos.top/parentSizes.height) * 100) + '%').css('left', ((pos.left/parentSizes.width) * 100) + '%'); 
}});