我正在使用 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>
最佳答案
这是因为您将其位置设置为 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>
关于javascript - 第一次尝试Jquery-Draggable跳转容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43391988/