基於百分比將項目拖到限制元素

Question

下面是它的外觀;

$("#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」）元素上。並用$（「。item」）選擇器將它附加到$（「。door」）元素。

我正在使用jQuery UI - Draggable來拖放項目。那裏沒有問題。

這是實際的問題;

但是，當您開始拖動元素時，該函數將更改元素的左側和頂部位置，如： top：10px left：10px。 但我想將基於百分比的項目拖動到包容元素。應該是 top：10％;左：10％。

有關如何做到這一點的任何想法？

Answer 1

我找到了解決辦法;

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

試試這個代碼：

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

點點更新，以上所有版本：

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