Question

我正在使用JQuery UI在代码

中创建一个可拖动的弹出窗口

在第一次拖动弹出式跳转到顶部和左角。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

您需要在代码中加入jqueryUI。

 $( ".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://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <div id="containment-wrapper">
        <div class="box"></div>
    </div>

Answer 3

正如@Rohan Kumar正确指出的那样，这是因为你错误地设置了CSS，但是他的解决方案会使你的.top和.left保持在0px。

你为什么要设置CSS？我的猜测是因为你希望它可以从某个位置拖动。编辑.css文件以这种方式完成：

$( ".box" ).draggable();

.box{
    left: 100px;
    top: 100px;
    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>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="containment-wrapper">
    <div class="box"></div>
</div>

Answer 4

**它会向左上方，因为你已经将css属性设置为顶部并且左边为'0'，所以它移动到那里jus删除了.css方法然后你可以正常拖动它 **

第一次尝试中的Jquery-Draggable跳跃容器

4 个答案: