元素远离屏幕

Question

我有一个固定 div，我通过JQuery UI 将其设置为可拖动的。 div 以启动为中心。

问题是，当div 被拖出屏幕时，（意思是，因为它离开屏幕，页面开始滚动）div 会移到一边。拖得越多，离光标越远。

另外，我如何用百分比定位div，这样当浏览器调整大小时，div 将保持其位置？ （即使它被拖了。）

JSFiddle

var dragDiv = $('#draggable');

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

dragDiv.draggable();

body {
  width: 2000px;
  height: 2000px;
  background-image: url("http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg");
}
#draggable {
  color: lightblue;
  background-color: red;
  width: 200px;
  position: fixed;
}

<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="draggable">Drag Me!</div>

Answer 1

一个简单的解决方案是使用固定位置的覆盖/包装器：

Working Example

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

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">fixed overlay<!-- add fixed position overlay/wrapper -->
  <div id="draggable">Drag Me!</div>
</div>

---

至于设置百分比位置，可以查看this answer。