jquery可拖动和具有底部固定位置的div的问题答案

【问题标题】：Problem with jquery draggable and div with bottom fix positionjquery可拖动和具有底部固定位置的div的问题
【发布时间】：2011-08-28 20:53:54
【问题描述】：

我有一个 div 的问题，该 div 一开始就固定在左下角。我需要让它可拖动，但是当我使用 jquery 来做它时，底部位置仍然存在并且 div 的大小会发生变化。

您可以在此页面中看到该行为：http://paraguasparados.com

div css 代码为：

.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left; 
font-size: 11px; 
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}

jquery代码为：

$jn("#fcp-cpanel").draggable({
        containment:"body",
        scroll: false,
        opacity: 0.35
        });

在 firebug 中，我删除了“底部”css 样式，它的工作原理应该如此。

感谢您的帮助。

【问题讨论】：

标签： jquery-ui position draggable

【解决方案1】：

对此最简单的解决方案是为您的固定可拖动<div> 添加宽度和高度，以阻止其在拖动时调整大小。

【讨论】：

【解决方案2】：

问题是您正在使固定元素可拖动，因此当您开始移动它时，底部的 css 属性会搞砸它。对此的解决方法是创建一个具有固定 css 属性的容器 div，并且您可以在其中添加可拖动元素。像这样的：

css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}

html:
<div class="fcp-cpanel-container">
    <div class="draggable fcp-cpanel">
         <p><b>Amigos Online</b>
            <span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
            <span onclick="maximize()" id="fcp-micon">
                <img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
                <img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
            </span>
        </p>
    </div>
</div>

我在这里使用您的代码设置了一个工作示例：http://jsfiddle.net/NdUNu/。

【讨论】：

【解决方案3】：

我试过了，它达到了我想要的效果

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

【讨论】：