Question

我有一个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
        });

当我在萤火虫中移除'底部'css样式时，它会像它应该的那样工作。

感谢您的帮助。

Answer 1

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

Answer 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/。

Answer 3

我试过这个，它做了我想要的事情

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

jquery draggable和div底部修复位置的问题

3 个答案: