DIVMoving

moving DIV toa all sides using arrows

HTML

<!--Moving div to all sides using arrows-->
<!-- click in the text box and move arrows -->
<input type=text id="tbx">
<div ="container">

   <div id="box"></div>
   </div>

CSS

#container {
  position: absolute;
  border: 2px solid black;
  width: 300px;
  height: 300px;
}   
#box {
    position:absolute;
    width:20px; height:20px;          
    background-color:black;
}

JavaScript

$('#tbx').keydown(function(pk){
var pos = $('#box').position();
  
  if(pk.keyCode == '37')
  {
      $('#box').css('left',pos.left - 2 + 'px');
  }
    if(pk.keyCode == '38')
  {      
     $('#box').css('top',pos.top - 2 +'px');
  }
    if(pk.keyCode == '39')
  {
           $('#box').css('left',pos.left + 10 + 'px');
  }
    if(pk.keyCode == '40')
  {
         $('#box').css('top',pos.top + 2 + 'px');
  }

  });