Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <script src="_so/js?stackoverflow.com/questions/24394311/bottom-of-a-div-sticking-to-the-draggable-div" id="so"></script>
  <meta charset="utf-8">
  <title>Demo by Roko C.B.</title>
</head>
<body>
​
  
  <div class="a"></div>
<div class="b">drag me</div>
  
  
  
</body>
</html>
 
*{margin:0;padding:0;}
.a {
    width: 40px;
    height: 20px;
    background-color:blue;
}
​
.b {
    position:absolute;
    top:20px;
    width: 40px;
    height: 40px; 
    background-color: red;
    font-size:12px;
}
 
$(function() {
​
    $('.b').draggable({
      axis: 'y',
      containment: [0, 20, 0, 200],
      drag: function( event, ui ) {
        $('.a').height(ui.position.top);
      }
    });
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers