jak uzyskać pozycję div Na podstawie procentu?

Question

z tego kodu można uzyskać pozycję div na podstawie piksela.

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

ale jak podać pozycję div Na podstawie procentu?

Answer 1

Użyj rozmiaru okna.

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

Kod ten podaje procent pozycji dla górnej i lewej strony.

Answer 2

jQuery position():

Opis: Pobierz aktualne współrzędne pierwszego elementu w zestaw elementów dopasowanych, w stosunku do offsetu rodzica.

Nie służy do ustawiania pozycji. Jeśli chcesz ustawić pozycję (w procentach lub w inny sposób), musisz użyć .css(), aby zmienić jej margines (lub górny, lewy), itd.

Answer 3

Myślę, że masz na myśli "dostać" zamiast "dawać". Będziesz musiał obliczyć procent, chyba że jest już w CSS.

Zawsze możesz eksperymentować.

#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

Wydłuża jQuery z funkcją 'a' 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); 

Używany jako:

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

Answer 5

Rozwiązanie to ma rozwiązać problem, który był coraz @naziiiii i może również pomóc w tej kwestii. sprawdź poniżej podany odnośnik

$(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/