问题与jQuery可拖动和div与底部修复位置

我有一个问题，在开始固定在左下角的div。我需要拖动它，但是当我使用jquery来完成它时，底部位置仍然存在，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风格它的作品就像它应该。

感谢您的任何帮助。

来源

2011-08-28 Memochipan

问题是，你正在制作一个固定的元素可拖动，所以当你开始移动时，底部的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/。

来源

2011-08-28 22:54:00

最简单的解决方案是在固定的可拖拽<div>上添加宽度和高度，以阻止拖拽调整大小。

来源

2011-09-29 01:54:22

我想这和它做了什么，我想

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

来源

2014-10-29 19:29:47

问题与jQuery可拖动和div与底部修复位置

回答

相关问题