Question

我正在尝试制作一个可选的可拖动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;
}

非常感谢任何帮助

Answer 1

要使叠加div不打扰周围的元素，请使用绝对定位。

将CSS更改为：

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

。
调整left和top来品尝。一旦拖动开始，这两个值将被忽略。

请注意，absolute !important;是必需的，因为 UI Draggable插件会自动添加position:relative;，而文档并不表示更轻松地覆盖它。

覆盖一个jquery draggable div

1 个答案: