Javascript 如何根据百分比获得部门职位？

使用此代码，您可以根据像素获得div的位置

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

但是如何根据百分比给出div位置呢？

jQuery

position（）

：

描述：获取图形中第一个元素的当前坐标 相对于偏移父元素的匹配元素集

它不用于设置位置。如果你想设置位置（以百分比或其他形式），你需要使用

.css（）

来更改其边距（或左上角），等等。

我想你的意思是“获取”而不是“给予”。你必须计算百分比，除非它已经在CSS中了

你总是可以尝试

#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);

#d{
位置：绝对位置；
左：33%；
顶部：50px；
背景色：红色；
宽度：100px；高度：100px；
}
警报（$（“#d”）.position（）.left++$（“#d”）.position（）.top）；
警报（$（“#d”）.css（“左”）+“+$（“#d”）.css（“顶”））；
var pcLeft=100*$（“#d”）.position（）.left/$（window.width（）；
var pcTop=100*$（“#d”）.position（）.top/$（window.width（）；
警报（pcLeft+“”+pcTop）；

使用窗口大小

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

---

此代码将为您提供顶部和左侧的位置百分比。

此代码使用“getWidthInPercent”函数扩展了jQuery：

(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);

用作：

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

---

这个解决方案解决了@naziiii遇到的bug，也可能有助于解决这个问题。检查下面给定的链接

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

---

根据窗口大小进行计算这是一个非常合理的问题。我不知道人们为什么投反对票。我在投票！但这有一个错误，请查看此链接。。。。（拖动一个div并调整窗口大小时效果很好，但如果拖动两个div并调整窗口大小，则第一个div的位置是从第二个div开始计算的）可以总结链接吗。外部链接倾向于感谢@litelite的反馈，我已经附上了链接参考