Question

我有一个固定 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/

这将获取浏览器计算的当前位置，并在可拖动的开始时将其转换为正常像素值。如果您使用可拖动我建议您熟悉这一点：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>

将固定的可拖动div

JSFiddle

3 个答案: