Проблема с перетаскиванием jquery и div с нижним фиксированным положением

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
        });

Когда в firebug я удаляю «нижний» стиль css, он работает так, как должен.

Спасибо за любую помощь.

Answer 1

Самое простое решение этого - добавить ширину и высоту к фиксированному перетаскиваемому элементу <div>, чтобы он не изменял размеры при перетаскивании.

Answer 2

Проблема в том, что вы делаете перетаскиваемый фиксированный элемент, поэтому нижний атрибут css портит его, когда вы начинаете его перемещать.Исправление для этого заключается в создании контейнера div, который имеет фиксированные атрибуты CSS, и внутри вы можете добавить перетаскиваемый элемент.Примерно так:

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" });
});