kéo các mục dựa trên tỷ lệ phần trăm vào phần tử ngăn chặn

Question

Dưới đây là những gì nó trông giống như;

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

Người dùng kéo phần tử $ ("#box ul li") và thả phần tử $ (". Door"). Và nó gắn nó vào phần tử $ (". Door") với bộ chọn $ (". Item").

Tôi đang sử dụng giao diện người dùng jquery - Có thể kéo và thả các mục. Không có vấn đề ở đó.

Đây là câu hỏi thực tế;

Nhưng khi bạn bắt đầu kéo phần tử, hàm sẽ thay đổi các vị trí trên cùng bên trái và trên cùng của phần tử như; đầu: 10px bên trái: 10px. Nhưng tôi muốn kéo mục dựa trên phần trăm vào phần tử ngăn chặn. Nó phải là hàng đầu: 10%; bên trái: 10%.

bất kỳ ý tưởng nào về cách thực hiện việc này?

Answer 1

Tôi đã tìm thấy giải pháp;

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

Cố Bộ luật này:

$(".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 được cập nhật phiên bản của tất cả trên:

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