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://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  
​
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  
  <div class="magic_movable">
      <div class="magic_background"></div>    
  </div>
  
  
</body>
</html>
 
​
.magic_movable{
​
  position:relative;
  overflow:hidden;
  background:#eee;
  width:300px;
  height:300px;
​
}
​
.magic_background{
  position:absolute;
  left:140px;
  top:140px;
  width:20px;
  height:20px;
  background:#444;
}
 
$(function(){
​
  var $par = $('.magic_movable'),
      $bg = $('.magic_background'),
      parW = $par.outerWidth(),
      parH = $par.outerHeight(),
      bgW = $bg.width()/2,
      bgH = $bg.height()/2,
      X, Y, posX, posY;
  
  var drag = 0; // flag
  
  
  $par.on('mousemove', function( e ){
    X = e.clientX - $(this).offset().left;
    Y = e.clientY - $(this).offset().top;
    posX = Math.min( Math.max(0, X-bgW), parW-(bgW*2) );
    posY = Math.min( Math.max(0, Y-bgH), parH-(bgH*2) );
    if(drag){
       $bg.css({left:posX, top:posY});
    }
  }).on('mouseleave', function(){
    drag = 0;
  });
  
  $bg.on('mouseenter', function( e ){
     drag = 1;
  });
​
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers