浮动可拖动框在调整大小时消失答案

【问题标题】：Floating Draggable Box Disappearing on Resize浮动可拖动框在调整大小时消失
【发布时间】：2013-01-08 17:07:57
【问题描述】：

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

您可以查看代码。

我该如何做到这一点？

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

【问题讨论】：

认为我们需要更多信息。另外，我假设你的小提琴应该使用 jQuery UI（就像jsfiddle.net/jxgUU/16）
另外，您正在为您的draggable 设置position:absolute。我认为这行不通...
@ Inrbob- 我将 Jquery UI 包含在其中——但它没有保存在 jsfiddle 中......假设可拖动的工作正常......我只是不知道如何制作盒子留在它的边界......
@ Lee Taylor - 如果我是相对的，它就会从屏幕上消失......当我真正找到它并点击它时，框就会消失。固定、继承等都和绝对一样。

标签： jquery html css draggable

【解决方案1】：

设置containment 选项：

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

jsFiddle example

【讨论】：

谢谢。那太棒了。我仍然有调整大小的问题。
演示中没有发生的事情需要发生吗？
当我调整窗口大小时，该框被隐藏了。我希望它是可见的。

【解决方案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(){

【讨论】：