overlaying a jquery draggable div_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-05 09:03 出处：网络

I\'m trying to make an optional draggable div, which shows up at some condition. This does work for me. The Initial location is fine, but the new div pushes the panel below further below. Now I want t

I'm trying to make an optional draggable div, which shows up at some condition. This does work for me. The Initial location is fine, but the new div pushes the panel below further below. Now I want the draggable panel to be displayed on top of the rest of the panels (without reshuffling the existing panels). The code is below, and I put an example with js libraries, and css on my website: link text (not sure what the stackoverflow policy is on this, as I'll probably won't leave it there forever).

<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>

The relevant css I'm currently using:

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;
}

Any help is greatly开发者_高级运维 appreciated

To get the overlay div to not disturb the elements around it use absolute positioning.

Change your CSS to:

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

.
Adjust left and top to taste. These 2 values will be ignored once dragging starts.

Note that the absolute !important; is needed because the UI Draggable plugin automatically adds position:relative; and the docs don't indicate an easier way to override it.