拖拽改變層大小例如：瀏覽器的視窗大小改變
阿新 • • 發佈：2019-02-15
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽改變層大小</title> <style type="text/css"> #div1{ width:100px; height:100px; background:red; position:absolute; left:500px; top:200px; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); var b = ""; oDiv.onmousedown = function(ev){ var ev = ev || event; var disW = this.offsetWidth;//oDiv的寬 var disX = ev.clientX;//滑鼠點選的位置距離瀏覽器可視區左邊的距離 var disL = this.offsetLeft;//oDiv的left值 var disH = this.offsetHeight;//oDiv的高 var disY = ev.clientY;//滑鼠點選的位置距離瀏覽器可視區上邊的距離 var disT = this.offsetTop;//oDiv的top值 if(disX>disL+disW-10){ // 如果滑鼠點選的位置距離瀏覽器可視區左邊的距離大於（oDiv的left值+oDiv的寬-10） //在這裡不用再判斷小於（oDiv的left值+oDiv的寬）的情況，因為如果大於了，滑鼠早已不在oDiv上了 b = "right"} if(disX<disL+10){ // 如果滑鼠點選的位置距離瀏覽器可視區左邊的距離小於（oDiv的left值+10） //在這裡不用再判斷大於（oDiv的left值）的情況，因為如果小於了，滑鼠早已不在oDiv上了 b = "left";} if(disY<disT +10){ // 如果滑鼠點選的位置距離瀏覽器可視區上邊的距離小於（oDiv的top值+10）//在這裡不用再判斷大於（oDiv的top值）的情況，因為如果值小於了，滑鼠早已不在oDiv上了 b = "Top";} if(disY>disT +disH-10){ // 如果滑鼠點選的位置距離瀏覽器可視區上邊的距離大於（oDiv的top值+oDiv的高-10）//在這裡不用再判斷小於（oDiv的top值+oDiv的高）的情況，因為如果值大於了，滑鼠早已不在oDiv上了 b = "Bottom";} document.onmousemove = function(ev){ var ev = ev || event; switch(b){ case 'right': oDiv.style.width = disW+(ev.clientX-disX)+"px"; //其中ev.clientX-disX的差值是移動的距離，或正或負值 break; case "left": oDiv.style.width = disW-(ev.clientX-disX)+"px"; oDiv.style.left = disL+(ev.clientX-disX)+"px"; break; case 'Top': oDiv.style.height = disH-(ev.clientY-disY)+"px"; oDiv.style.top = disT+(ev.clientY-disY)+"px"; break; case 'Bottom': oDiv.style.height = disH+(ev.clientY-disY)+"px"; break; } } document.onmouseup = function(){ document.onmousemove = document.onmouseup = null; } return false; } } </script> </head> <body> <div id="div1"></div></body> </html>