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

Question

修改

困扰我的是，如果你将div一直拖到右下角，那么你将浏览器的大小设置得更大，div不在其父视图中，直到你实际拖动它。拖动它后，它会在其父视图中快速返回。

即使在调整浏览器大小后，如何让div保持其父视图？

JSFiddle

请参阅下面的代码段。

旧版

我有一个div，我通过JQuery UI进行了拖拽。我希望它以百分比值定位。这样，当您调整浏览器大小时，div将相对或按比例位于同一位置。

我检查了this answer，并按照它说的做了。当我输出左侧和顶部位置时，数字不准确。当我将div一直拖到右下角时，它会给我以下输出：

  

66.55518394648828％
  92.71255060728744％

实际上，它确实取决于窗口大小，但重点是，左右数字不是100％。

当浏览器调整大小时，如何按比例将div保持在同一位置？

相关代码：

stop: function () {
    console.log(parseInt($(this).css("left")) / (wrapper.width() / 100) + "%");
    console.log(parseInt($(this).css("top")) / (wrapper.height() / 100) + "%");
}

JSFiddle

代码段

var wrapper = $('#fixed');
var dragDiv = $('#draggable');

dragDiv.css({
  'top': ($(window).height() / 2) - (dragDiv.outerHeight() / 2),
  'left': ($(window).width() / 2) - (dragDiv.outerWidth() / 2)
});

dragDiv.draggable({
  containment: "parent", // <- keep draggable within fixed overlay
  stop: function() {
    $(this).css("left", parseInt($(this).css("left")) / (wrapper.width() / 100) + "%");
    $(this).css("top", parseInt($(this).css("top")) / (wrapper.height() / 100) + "%");

    console.log(parseInt($(this).css("left")) / (wrapper.width() / 100) + "%");
    console.log(parseInt($(this).css("top")) / (wrapper.height() / 100) + "%");
  }
});

body {
  /*width: 2000px;
  height: 2000px;*/
  background-image: url("http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg");
}
#fixed {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.25)
}
#draggable {
  color: lightblue;
  background-color: red;
  width: 200px;
  position: absolute;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div id="fixed">
  <div id="draggable">Drag Me!</div>
</div>

Answer 1

问题是可拖动元素的父容器具有固定位置。 您无法相对于固定元素定位项目。

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

这不会给你一个相对于固定容器的左侧位置，而是一个在其上有填充的body元素。因此，要么将html，body和#fixed容器设置为100％的高度和宽度，并使它们相对位置。

OR

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

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

Fiddle with body, html, and #fixed at 100%

Fiddle with 0 padding and margin

修改

每次调整窗口大小时，我都会创建一个新事件。事件检查可拖动div是否在窗口范围之外。根据需要进行调整，以保持元素在视野中。我使用代码 WITHOUT 固定元素，因为没有必要。如果您有任何问题，请告诉我。

<强> 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) + "%");
}

Updated Fiddle for question part 2