我正在尝试制作一个可选的可拖动 div，它会在某些情况下显示。这对我有用。初始位置很好，但新的 div 将面板推到更下方。现在我希望可拖动面板显示在其余面板的顶部(无需重新排列现有面板)。 代码如下，我在我的网站上放了一个带有js库和css的例子:link text (不确定 stackoverflow 的政策是什么，因为我可能不会永远把它留在那里)。
<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;
}
非常感谢任何帮助
最佳答案
为了让覆盖 div 不干扰它周围的元素，使用绝对定位。
将您的 CSS 更改为:
#draggable {
border: 3px solid red;
padding: 0.5em;
width: 120px;
position: absolute !important;
left: 113px;
top: 69px;
}
.
根据口味调整 left 和 top。一旦开始拖动，这 2 个值将被忽略。
请注意，absolute !important; 是必需的，因为 UI Draggable 插件 会自动添加 position:relative; 而文档不会指出一种更简单的方法来覆盖它。
关于jquery - 覆盖一个 jquery 可拖动的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3147391/