come si può ottenere la posizione div in base alla percentuale?

Question

con questo codice è possibile ottenere una posizione div in base al pixel.

$('#div').position(); 

ma come si può dare la posizione div In base alla percentuale?

Answer 1

dimensioni Uso della finestra.

var position = $('#div').position(); 
var percentLeft = position.left/$(window).width() * 100; 
var percentTop = position.top/$(window).height() *100; 

Questo codice fornirà la percentuale di posizione per i lati superiore e sinistro.

Answer 2

jQuery position():

Descrizione: I coordinate correnti del primo elemento della insieme di elementi accoppiati, relativi al genitore offset.

Non è utilizzato per impostare la posizione. Se si desidera impostare la posizione (in percentuale o in altro modo) è necessario utilizzare .css() per modificare il margine (o superiore, a sinistra), ecc.

Answer 3

Penso che intendiate "get" invece di "give". Dovresti calcolare la percentuale a meno che non sia già nel CSS.

È sempre possibile sperimentare.

#d { 
    position: absolute; 
    left: 33%; 
    top: 50px; 
    background-color: red; 
    width: 100px; height: 100px; 
} 

<div id="d"></div> 

alert($("#d").position().left + " " + $("#d").position().top); 
alert($("#d").css("left") + " " + $("#d").css("top")); 
var pcLeft = 100 * $("#d").position().left/$(window).width(); 
var pcTop = 100 * $("#d").position().top/$(window).width(); 
alert(pcLeft + " " + pcTop); 

Answer 4

Questo si estende jQuery con funzione di un 'getWidthInPercent':

(function ($) { 

    $.fn.getWidthInPercent = function() { 
     var width = (
         parseFloat($(this).css('width')) 
        + parseFloat($(this).css('padding-right'))  
        + parseFloat($(this).css('padding-left')) 
        )/parseFloat($(this).parent().css('width')); 
     return Math.round(100*width); 
    }; 

})(jQuery); 

Usato come:

$('#element').getWidthInPercent() ; 

Answer 5

Questa soluzione ha risolto bug che stava diventando @naziiiii e potrebbe anche contribuire a questa domanda. controllare il link qui sotto data

$(function(){ 
var percentLeft = ''; 
var percentTop = ''; 
    var percentLeft2 = ''; 
    var percentTop2 = ''; 

    $("#div1").draggable({ 
     containment : '#container', 
     tolerance: 'touch', 
     stop:function(event, info){ 
      var position = $(this).position(); 
      percentLeft = position.left/$('#container').width() * 100; 
      percentTop = position.top/$('#container').height() *100;  
     } 
    });   
     $("#div2").draggable({ 
     containment : '#container', 
     tolerance: 'touch', 
     stop:function(event, info){ 
      var position2 = $(this).position(); 
      percentLeft2 = position2.left/$('#container').width() * 100; 
      percentTop2 = position2.top/$('#container').height() *100;        
     } 
    }); 

    function wResize() { 

     var winW = $('#container').width(); 
     var d = $('#div1').position(); 
    var d2 = $('#div2').position();  

     $('#div1').css({color:'green', 
         position: 'absolute', 
         left: percentLeft + '%', 
         top: percentTop + '%' 
         }); 
      $('#div2').css({color:'red', 
         position: 'absolute', 
         left: percentLeft2 + '%', 
         top: percentTop2 + '%' 
         }); 
     //$('#test2').html(percentLeft+ ' _____ '+ percentTop + 'winW : ' + winW); 
} 

wResize(); 

$(window).resize(function() { 
    wResize(); 
}); 
});  

http://jsfiddle.net/komal10041992/q74vxcxf/