Home/ Questions/Q 923861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T19:15:32+00:00

I’m trying to make an optional draggable div, which shows up at some condition.

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0