以固定的可拖动div为中心

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/

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