Jquery ui jquery可拖动和具有底部固定位置的div存在问题

我有一个问题，一开始是固定在左下角的div。我需要拖拽，但当我使用jquery时，底部位置保持不变，div的大小改变

您可以在此页面中看到行为：

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样式，它可以正常工作

---

感谢您的帮助。

问题在于您正在使固定元素可拖动，因此当您开始移动它时，底部的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>

css:
.fcp集装箱{
位置：固定；
底部：10px；
左：10px；
}
.fcp cpanel{
填充物：5px；
颜色：#000；
文本对齐：左对齐；
字体大小：11px；
背景：url（'http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg“）重复-x；
边框：1px实心#000；
}
html:
朋友在线
0

---

我在这里用您的代码设置了一个工作示例：。

最简单的解决方案是在固定的可拖动对象上添加一个宽度和高度

，以阻止其在拖动时调整大小。

我尝试了这个方法，它实现了我想要的效果

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