居中固定的可拖动div [英] Center a fixed draggable div

问题描述

我有一个固定的> div ，我试图垂直和水平居中。是的，我知道有很多问题和教程来执行此操作。我检查并按照说明操作。这是我实施的一个：

  #draggable {
 position：fixed; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
} 
  

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

问题是，当你开始拖动它时， code> div 突然升高。我怎样才能将一个固定的，可拖动的 div ？

JSFiddle

$ b

$（'＃draggable '）.draggable（）;

body {width：2000px ;身高：2000px; background-image：url（http://www.freevector.com/site_media/preview_images/FreeVector-Square-Patterns-Set.jpg）;}＃draggable {background-color：red;颜色：浅蓝色;宽度：200px;位置：固定;顶部：50％;剩下：50％; transform：translate（-50％，-50％）;}

< script type =text / javascriptsrc =// code.jquery.com/jquery-2.1.4.js\">< ;; script>< ;; script type =text / javascriptsrc = //code.jquery.com/ui/1.11.4/jquery-ui.js\"></script><link rel =stylesheettype =text / csshref =// code。 jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css\">< div id =draggable>拖曳我！< / div>

编辑我更新了示例。 draggable 没有设置高度。 您可以使用可拖动的启动方法来修改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 /

I have a fixed div which I am trying to center vertically and horizontally. Yes, I know there are many question and tutorials to perform this. I checked and followed the instructions. Here's one that I implemented:

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

Now, I also want the div to be draggable. So it should start off at the center of the screen, then the user will have an option to drag it.

The problem is, when you start dragging it, the div suddenly moves higher. How can I center a fixed, draggable 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>

Edit I updated the examples. draggable doesn't have a set height.

解决方案

You could use draggable start method to modify css.

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

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

} });

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

This gets current position calculated by browser and converts it into normal pixel value, on draggable start. If you are using draggable I sugggest you to familiarize yourself with this: http://api.jqueryui.com/draggable/

这篇关于居中固定的可拖动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！