標籤：
<!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>
自訂div 拖動。鍵盤上下左右鍵移動，ctrl+Q控制是否可以移動，ctrl+斷行符號，返回初始狀態
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
