Ziehen von Elementen basierend auf Prozentsatz auf Containment-Element

Question

So sieht es aus;

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

Benutzer zieht die $ ("#box ul li") Element und lässt es auf $ ("Tür") Element. Und es hängt an $ (". Door") Element mit $ (". Item") Selektor.

Ich benutze jquery UI - Draggable zum Ziehen und Ablegen von Elementen. Dort gibt es kein Problem.

Hier ist die eigentliche Frage;

Aber wenn Sie beginnen, das Element zu ziehen, ändert die Funktion die linken und oberen Positionen des Elements wie; oben: 10px links: 10px. Aber ich möchte das Element basierend auf Prozent auf das Containment-Element ziehen. Es sollte oben sein: 10%; links: 10%.

eine Idee, wie man das macht?

Answer 1

Ich habe eine Lösung gefunden;

$(".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

Versuchen Sie diesen Code:

$(".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 aktualisierte Version aller oben:

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