Я пытаюсь сделать необязательный перетаскиваемый div, который появляется при некоторых условиях. Это работает для меня. Первоначальное расположение в порядке, но новый div выдвигает панель ниже еще ниже. Теперь я хочу, чтобы перетаскиваемая панель отображалась поверх остальных панелей (без перестановки существующих панелей).
Код приведен ниже, и я разместил пример с библиотеками js и css на моем веб-сайте: текст ссылки (не уверен в том, что такое политика 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;
}
Любая помощь очень ценится