javascript - 当浏览器调整大小时，将元素保留在父 View 中

Question

编辑

让我困扰的是，如果您将 div 一直拖到右下角，那么浏览器的尺寸会变大，div 不在其父 View 中，直到您真正拖动它。一旦您拖动它，它就会回到其父 View 中。

如何使 div 在调整浏览器大小后仍保留在其父 View 中？

JSFiddle

请参阅下面的代码片段。

---

---

年长

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

我 checkout 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')

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

或

从您的正文和 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