覆蓋一個jQuery可拖動div

我試圖做出一個可選的可拖動div，它出現在某些條件下。這對我有用。初始位置很好，但新的div將面板推到下面。現在我希望可拖動的面板顯示在其餘面板的頂部（無需重新洗牌現有的面板）。下面的代碼，我把我的網站上的js庫和css放在一個例子中：link text（不知道什麼是stackoverflow策略，因爲我可能不會永遠留在那裏）。覆蓋一個jQuery可拖動div

<html> 
<head> 
<title>Desgin Mayor</title> 
<style type="text/css"> 
#draggable { width: 120px; padding: 0.5em; border: 3px solid red; } 
</style> 
<script type="text/javascript"> 
</script> 




<link rel="stylesheet" href="css/designmayor.css" type="text/css" media="screen, projection"/> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/jquery.ui.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
     $("#draggable").draggable(); 
     $("#draggable").hide(); 
}); 
function test() { 
    for (i=0;i<10;i++) { 
      $('<div class="inputline">Line ' + i + '</div>').appendTo('#draggable'); 
    } 
    $('#draggable').show(); 
} 
</script> 
</head> 
<body> 
<div id="header"><div class="headertext">Design Mayor</div><div id="draggable" class="ui-widget-content inputpanel"> 
<p>Input Controls</p> 

</div></div> 

<div class="designmenu"> 
<ul class="menu"> 
    <li><a href="javascript:test()">Press me</a></li> 
</ul> 
</div> 
<div id="contentscontainer"> 
<div id="designpanel"> 
</div> 
</div> 
</body> 
</html>

我目前使用的相關CSS：

element.style { 
    display:block; 
    position:relative; 
} 
#draggable { 
    border:3px solid red; 
    padding:0.5em; 
    width:120px; 
} 
drag.html (line 5) 
.ui-widget-content { 
    background:url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF; 
    border:1px solid #AAAAAA; 
    color:#222222; 
} 
designmayor.css (line 62) 
.inputpanel { 
    border:1px solid #FF0000; 
    display:inline; 
    float:right; 
    font-size:65%; 
    left:10px; 
    width:7%; 
    z-index:5; 
}

任何幫助是極大的讚賞

來源

2010-06-30 dr jerry

要獲得覆蓋DIV圍繞它使用絕對定位不干擾的元素。

你的CSS更改爲：

#draggable { 
    border:  3px solid red; 
    padding: 0.5em; 
    width:  120px; 
    position: absolute !important; 
    left:  113px; 
    top:  69px; 
}

。
調整left和top品嚐。一旦拖動開始，這兩個值將被忽略。所需要的absolute !important;因爲UI可拖動的插件自動添加position:relative;和文檔不表明一個更簡單的方法來覆蓋它

注意。

來源

2010-07-08 00:05:11

覆蓋一個jQuery可拖動div

回答

相關問題