trascinamento di articoli in base alla percentuale sull'elemento di contenimento

Question

Ecco come appare;

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

utente trascina i $ ("#box ul li") elemento e gocce su $ ("porta") elemento. E lo aggiunge all'elemento $ (". Door") con il selettore $ (". Item").

Sto usando l'interfaccia utente di jquery - Trascinabile per trascinare gli oggetti. Non c'è nessun problema lì.

Ecco la domanda effettiva;

Ma quando si avvia il trascinamento dell'elemento, la funzione cambia le posizioni sinistra e superiore dell'elemento come; superiore: 10 px a sinistra: 10px. Ma voglio trascinare l'elemento in base alla percentuale sull'elemento di contenimento. Dovrebbe essere superiore: 10%; a sinistra: 10%.

qualche idea su come fare questo?

Answer 1

Ho trovato una soluzione;

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

provare questo codice:

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

versione

Un po 'aggiornata di tutti al di sopra:

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