DIVMoving

moving DIV toa all sides using arrows

by Chandana Thota

HTML

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

CSS

#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 - 10 + 'px');
  }
    if(pk.keyCode == '38')
  {      
     $('#box').css('top',pos.top - 10 +'px');
  }
    if(pk.keyCode == '39')
  {
           $('#box').css('left',pos.left + 30 + 'px');
  }
    if(pk.keyCode == '40')
  {
         $('#box').css('top',pos.top + 10 + 'px');
  }

  });