Question

我正在尝试创建一个浮动窗口，该窗口在调整大小时保持在边距内：

您可以查看代码。

我如何做到这一点？

$(function()
{
    $("#result").draggable();
});    

#result 
{ 
    border:1px solid #000;
    width:375px;
    position:absolute;
    z-index:100;
    left:75%x;
    top:100px;
    margin-left: -10px;     
    margin-top:  -50px;   
    cursor:move;
    color:black;
}

<div id="result"  class="ui-widget-content" >
    <div style="background-color:#096db5;color:white;font-size:9px;text-align:center;">
        click window to drag
    </div>
    <div id="info">
        blah
    </div>
</div>

Answer 1

设置containment选项：

$("#result").draggable({ containment: "window" });

<强> jsFiddle example

Answer 2

我终于找到了一个脚本，当它碰到边距时会自动居中关于调整大小。

来源：

http://jqueryui.com/position/#default

这是最终的代码：

$(window).resize(function(){
    $("#result").position({
        of: "#wrapper",
        my: "center  middle",
        at: "center middle",    
        collision: "fit flip"
    })//$("#result").position({
 });//$(window).resize(function(){

浮动可移动的盒子在Resize上消失

2 个答案: