以固定的可拖动div为中心

我有一个固定的 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://sofzh.miximages.com/javascript/FreeVector-Square-Patterns-Set.jpg"); } #draggable { background-color: red; color: lightblue; width: 200px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

    
Drag Me! 

编辑我更新了示例。 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/

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://sofzh.miximages.com/javascript/FreeVector-Square-Patterns-Set.jpg"); } #draggable { background-color: red; color: lightblue; height: 20%; width: 20%; position: fixed; top: 40%; left: 40%; } 

    
Drag Me!