自定义div 拖动。键盘上下左右键移动，ctrl+Q控制是否可以移动，ctrl+回车，返回初始状态 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
*{margin:0;padding:0;list-style:none;}
#div1{ position:absolute;left:0;top:0;width:200px; height:200px; background:red;}


</style>
<script>


window.onload = function(){
     var oDiv = document.getElementById("div1");
     
     
     var bLeft = bTop = bRight = bBottom = false;
     var step = 10;
     var bDarg = false;
     
     
     var json = {width:oDiv.offsetWidth + "px",height:"200px",left:0,top:0,background:"red"};
     
     function initDiv(json){
         for(var name in json){
             oDiv.style[name] = json[name];//?
         }
     }
     
     
     
     document.onkeydown = function(ev){
         var oEvent = ev || event;
         
         var keyCode = oEvent.keyCode;
         
         switch(keyCode){
             case 37:
               bLeft = true; 
               break;
             case 38:
               bTop = true;
               break;
             case 39:
               bRight = true;
               break;
             case 40:
               bBottom = true;
               break;
         }
         
         //ctrl + Q   控制是否可以拖拽
         if(oEvent.ctrlKey && keyCode == 81){
             
             bDarg = !bDarg;
             if(bDarg){
                drag();
             } else {
                noDrag();
             }
    
         }
         
         //ctrl + 上 中心点放大
         if(oEvent.ctrlKey && keyCode == 38){
            bTop = false;
            oDiv.style.width = oDiv.offsetWidth + step + "px";
            oDiv.style.height = oDiv.offsetHeight + step + "px"; 
            oDiv.style.left = oDiv.offsetLeft - step/2 + "px"; 
            oDiv.style.top = oDiv.offsetTop - step/2 + "px"; 
             
         }
         
         //ctrl + 下  中心点缩小
         if(oEvent.ctrlKey && keyCode == 40){
             bBottom = false;
            oDiv.style.width = oDiv.offsetWidth - step + "px";
            oDiv.style.height = oDiv.offsetHeight - step + "px"; 
            oDiv.style.left = oDiv.offsetLeft + step/2 + "px"; 
            oDiv.style.top = oDiv.offsetTop + step/2 + "px"; 
         }
         
         //ctrl + 回车   还原到左上角
         if(oEvent.ctrlKey && keyCode == 13){
             //oDiv.style.cssText = " position:absolute;left:0;top:0;width:200px; height:200px; background:red;";
             
             initDiv(json);
         }
          
     };
     
     
     document.onkeyup = function(ev){
         var oEvent = ev || event;
         
         var keyCode = oEvent.keyCode;
         
         switch(keyCode){
             case 37:
               bLeft = false;
               break;
             case 38:
               bTop = false;
               break;
             case 39:
               bRight = false;
               break;
             case 40:
               bBottom = false;
               break;
         } 
     };
     
     
     
     setInterval(function(){
         if(bLeft){
             oDiv.style.left = oDiv.offsetLeft - step + "px";
         }
         if(bTop){
             oDiv.style.top = oDiv.offsetTop - step + "px";
         }
         if(bRight){
             oDiv.style.left = oDiv.offsetLeft + step + "px";
         }
         if(bBottom){
             oDiv.style.top = oDiv.offsetTop + step + "px";
         }
         
     },30);
     
     function noDrag(){
         oDiv.onmousedown = null;     
     }
     
     
     function drag(){ 
         oDiv.onmousedown = function(ev){
             
            var oEvent = ev || event;
            var disX = oEvent.clientX - oDiv.offsetLeft;
            var disY = oEvent.clientY - oDiv.offsetTop;
            
            document.onmousemove = function(ev){
                var oEvent = ev || event;
                var l=oEvent.clientX-disX;
                var t=oEvent.clientY-disY;
                if(l<0){
                    l=0;
                }else if(l > document.documentElement.clientWidth - oDiv.offsetWidth) {
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                }
                if(t<0){
                    t=0;
                } else if(t > document.documentElement.clientHeight - oDiv.offsetHeight) {
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                oDiv.style.left = l + "px";
                oDiv.style.top = t + "px";
            };
             
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
                
                oDiv.releaseCapture && oDiv.releaseCapture();    //释放捕获
            };
            //捕获  解决IE浏览器下拖拽图片的bug，即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点
            oDiv.setCapture && oDiv.setCapture(); 
            return false;     
         };
     }
    
};


</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

 

posted @ 2015-03-01 17:23  高尔础础  阅读(223)  评论(0)    收藏  举报