Javascript 当浏览器调整大小时，将元素保留在父视图中

编辑

困扰我的是，如果你把div一直拖到右下角，那么你会使浏览器的大小变大，div不在它的父视图中，直到你真正拖动它。拖动它后，它将在其父视图中捕捉回来

如何使

div

即使在调整浏览器大小后仍保留在其父视图中

请参阅下面的代码片段

---

---

较老的

我有一个

div

，可以通过jqueryui拖动它。我希望它以百分比值定位。这样，当您调整浏览器的大小时，

div

将相对地或成比例地位于相同的位置

我退房了，照上面说的做了。当我输出左侧和顶部位置时，数字不准确。当我将

div一直拖到右下角时，它会给出以下输出：

66.55518394648828%

92.71255060728744%

事实上，它确实取决于窗口大小，但关键是，数字并不是100%适用于左侧和右侧

当浏览器调整大小时，如何使
div
按比例保持在相同的位置

相关代码：

代码片段

var wrapper=$（'#已修复'）；
var dragDiv=$（“#draggable”）；
dragDiv.css({
'top'：（$（window.height（）/2）-（dragDiv.outerHeight（）/2），
“left”：（$（window.width（）/2）-（dragDiv.outerWidth（）/2）
});
可拖动的({
包含：“父级”，问题在于可拖动元素的父级容器具有固定位置。
不能相对于固定元素定位项目。

 $(this).css("left") // this refers to $('#draggable')

这并不是给你一个相对于固定容器的左位置，而是给你一个有填充的body元素。所以要么把html、body和#fixed容器的高度和宽度设置为100%，并使它们的位置相对

或

从body和html元素中删除填充和边距

body, html{ margin: 0px; padding: 0px;}



编辑

我创建了一个新事件，以便在每次调整窗口大小时触发。该事件检查可拖动div是否在窗口的边界之外。根据需要进行调整以保持元素在视图中。我使用了代码，而不使用固定元素，因为它不是必需的。如果您有任何问题，请告诉我

JS

$(window).resize(function () {
  if ($(window).innerWidth() > $(dragDiv).width()) {
    var oLeft = parseInt($(window).innerWidth() - $(dragDiv).width());
    var posLeft = parseInt($(dragDiv).css("left"));
    if (posLeft > oLeft) {
      $(dragDiv).css("left", oLeft);
      toPercent();
    }
  }

  if ($(window).innerHeight() > $(dragDiv).height()) {
    var oTop = parseInt($(window).innerHeight() - $(dragDiv).height());
    var posTop = parseInt($(dragDiv).css("top"));
    if (posTop > oTop) {
      $(dragDiv).css("top", oTop);
      toPercent();
    }
  }

});

function toPercent() {
  $(dragDiv).css("left", parseInt($(dragDiv).css("left")) / (wrapper.innerWidth() / 100) + "%");
  $(dragDiv).css("top", parseInt($(dragDiv).css("top")) / (wrapper.innerHeight() / 100) + "%");
}

我不明白为什么它需要100%。请注意，当您的div位于屏幕最右侧时，其左侧位置和宽度加在一起将成为视口的宽度。如果div的左侧为100%，其内容将溢出其容器。我认为您需要澄清您希望得到的结果。如何解决你知道它不准确吗？哦，我明白你的意思！你是对的！所以我想困扰我的是，如果你一直拖动
div
到右下角，那么你会使浏览器的大小变大，
div
不在它的父视图中，直到你真正拖动它。一旦你拖动它，它就会用I键弹回来n它的父母视图更新了我的答案，希望这就是你想要的。谢谢！真的很好而且很好的改进！只有一个问题。将
div
一直放在右边。然后水平调整窗口的大小，使窗口在两侧拥抱div。然后当你再次将窗口变大时，div移到左边de.另外，固定div是必要的，因为当你滚动时，我希望div保持静止。@Jessica它向左移动的原因是因为参考点在“top”和“left”之间是从div的左上角开始测量的，而不是您认为的它的中心。您可以通过使用负边距来弥补这一点，但您必须编辑JavaScript代码来进行补偿。正如我所说，您不能将元素相对于固定容器进行定位。您需要在固定元素中添加另一个div，以宽度和高度为100%，位置设置为相对。嘿，在将css设置为可拖动div的中心后，只需将conPercent（）初始函数调用移动到即可。
$(window).resize(function () {
  if ($(window).innerWidth() > $(dragDiv).width()) {
    var oLeft = parseInt($(window).innerWidth() - $(dragDiv).width());
    var posLeft = parseInt($(dragDiv).css("left"));
    if (posLeft > oLeft) {
      $(dragDiv).css("left", oLeft);
      toPercent();
    }
  }

  if ($(window).innerHeight() > $(dragDiv).height()) {
    var oTop = parseInt($(window).innerHeight() - $(dragDiv).height());
    var posTop = parseInt($(dragDiv).css("top"));
    if (posTop > oTop) {
      $(dragDiv).css("top", oTop);
      toPercent();
    }
  }

});

function toPercent() {
  $(dragDiv).css("left", parseInt($(dragDiv).css("left")) / (wrapper.innerWidth() / 100) + "%");
  $(dragDiv).css("top", parseInt($(dragDiv).css("top")) / (wrapper.innerHeight() / 100) + "%");
}