javascript - 将固定的可拖动 div 居中

Question

我有一个fixed div，我试图将其垂直和水平居中。是的，我知道有许多的问题和教程来执行此操作。我检查并按照说明进行操作。这是我实现的一个:

#draggable {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

现在，我还希望 div 可以拖动。所以它应该从屏幕中央开始，然后用户可以选择拖动它。

问题是，当您开始拖动它时，div 突然向上移动。如何让固定的、可拖动的 div 居中？

JSFiddle

$('#draggable').draggable();

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

<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>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

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

编辑 我更新了示例。 draggable 没有设置高度。

Answer 1

你可以使用 draggable start 方法来修改 css。

$('#draggable').draggable({ start: function() {

$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});

} });

http://jsfiddle.net/y2ehtjsu/4/

这会获取浏览器计算的当前位置，并在可拖动开始时将其转换为正常像素值。如果您使用的是 draggable，我建议您熟悉一下:http://api.jqueryui.com/draggable/