采取最高和最低的位置，并在javascript中转换为百分比

Question

我有一个正方形区域，可捕获鼠标单击并在该位置当前添加一个新的div。 我的目标是超越那些：Ypx; 左：Xpx； 坐标，并使用javascript将其转换为百分比，因为方形区域将在不同页面上设置为不同大小。

我当前的示例http://jsfiddle.net/p5h26/1/

//current js for the effect( some small diferences in the click event using backbone events)
$(".div_container").click(function(e, ui){
          var parentOffset = $(this).offset();         
          var relativeXPosition = (e.pageX - parentOffset.left);
          var relativeYPosition = (e.pageY - parentOffset.top);         
          $(".div_container").append('<div class="MAPICON" style="top:'+relativeYPosition+'px; left:'+relativeXPosition+'px;"></div>');
});

编辑：我希望能够占据顶部和左侧的位置，并将它们以百分比的形式保存到我的数据库中，我不知道该如何进行数学运算或从哪里开始。

Answer 1

您可以使用以下代码计算百分比：

var $this = $(this), offset = $this.offset(),
    width = $this.innerWidth(), height = $this.innerHeight();
var parentOffset = $(this).offset();         
var relativeXPosition = (e.pageX - parentOffset.left),
    percentx = relativeXPosition/width;
var relativeYPosition = (e.pageY - parentOffset.top),
    percenty = relativeYPosition/height;

但是我认为您确实希望从相对位置更改为绝对位置。 当您用小提琴演奏很多次单击时，附加的div开始碰撞并破坏彼此的位置。