javascript - 第一次尝试Jquery-Draggable跳转容器

Question

我正在使用 JQuery UI 来制作可拖动的弹出窗口并在代码中

在第一个拖动中，弹出窗口跳转到左上角。

$( ".box" ).css({"top": 0,
                 "bottom": 0,
                 "left": 0,
                 "right": 0,
                 "margin": "auto"
                });
                
$( ".box" ).draggable();

.box{
  
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    width: 150px;
    height: 150px;
    box-shadow: inset 0 0 20px;
    position:fixed;
}

#containment-wrapper{
   width:300px;
   height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containment-wrapper">
    <div class="box"></div>
</div>

enter link description here

Answer 1

这是因为您将其位置设置为 0,0 删除 CSS 位置将解决您的问题。

/*$( ".box" ).css({"top": 0,
          "bottom": 0,
          "left": 0,
          "right": 0,
          "margin": "auto"
});*/
$(".box").draggable();

.box {
  /*left:0px;
    top:0px;
    right:0px;
    bottom:0px;*/
  float: left;
  margin: auto;
  width: 100px;
  height: 100px;
  box-shadow: inset 0 0 20px;
  position: fixed;
}

#containment-wrapper {
  width: 300px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="containment-wrapper">
  <div class="box"></div>
</div>