---恢复内容开始---
想要快速的做这样一个简单效果，首先要明白它的原理;
样式设置的重点，就是要跟上次拖拽一样，给该元素绝对定位，
事件就是onkeydown,事件，通过判断键码，来执行；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#dDiv{
100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var dDiv=document.getElementById("dDiv")
var a=8;
var b=8;
window.onkeydown = function(e){
if(e.keyCode==37){
//左
// 当鼠标按下时判断键码
dDiv.style.left=b-- +"px"
}
if(e.keyCode==38){
//上
dDiv.style.top=a-- +"px"
}
if(e.keyCode==39){
//右
dDiv.style.left=b++ +"px"
}
if(e.keyCode==40){
//下
dDiv.style.top=a++ +"px"
}
}
}
</script>
</head>
<body>
<div id="dDiv">
</div>
</body>
</html>
2.熟悉一下常使用的特殊键码：
按键 键码 按键 键码 按键 键码
BackSpace 8 Esc 27 Right Arrow 39
Tab 9 Spacebar 32 Down Arrow 40
Clear 12 Page Up 33 Insert 45
/? 191 Enter 13 Page Down 34
Delete 46 `~ 192 -_ 189
.> 190 Shift 16 End 35
Num Lock 144 [{219 Control 17
Home 36 ;: 186 /| 220
Alt 18 Left Arrow 37 =+ 187
]} 221 Cape Lock 20
---恢复内容结束---