居中固定的可拖动 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

您可以使用可拖动的启动方法来修改 css。

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

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

} });

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

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

Answer 2

改进 Maciej Krawczyk 的回答。

您可以将transform 放在一个单独的类中（称为centered）并在用户开始拖动时删除该类。毕竟，通常拖动某物的目的是永久改变其位置。这意味着您需要定心transform 只工作一次（当div 首次显示时）。当用户拖动 div 时或在任何后期阶段，您很可能都不需要它工作。

http://jsfiddle.net/y2ehtjsu/8/

Answer 3

问题是可拖动代码似乎无法正确处理翻译后的元素位置。解决这个问题的简单方法是删除平移并将您的位置从 40%/40% 开始，因为宽度/高度为 20%，所以它将居中。

$('#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;
  height: 20%;
  width: 20%;
  position: fixed;
  top: 40%;
  left: 40%;
}

<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>