多方向拖拽改变元素大小
Posted ╭ 儛動嘚靈魂
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多方向拖拽改变元素大小相关的知识，希望对你有一定的参考价值。
拖拽：
1 onmousedown 存距离 disX/Y
2 onmousemove 修改left top
3 onmouseup 释放资源
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 position: absolute; 12 left: 200px; 13 top:200px; 14 } 15 16 </style> 17 <script> 18 window.onload=function(){ 19 var oBox=document.getElementById(‘box‘); 20 21 oBox.onmousedown=function(e){ 22 e=e||event; 23 var 24 pos=fn.call(this), 25 disy= e.clientY, 26 disx= e.clientX, 27 disL=this.offsetLeft, 28 disT=this.offsetTop, 29 w=oBox.offsetWidth, 30 h=oBox.offsetHeight; 31 32 33 document.onmousemove=function(e){ 34 e=e||event; 35 36 var x= e.clientX-disx, 37 y= e.clientY-disy; 38 39 40 41 if(inArr(pos,‘top‘)!=-1){ 42 if(h-y>=50){ 43 oBox.style.height=h-y+‘px‘; 44 oBox.style.top=disT+y+‘px‘; 45 } 46 47 } 48 if(inArr(pos,‘bottom‘)!=-1){ 49 if(y + h>=50) { 50 oBox.style.height = y + h + ‘px‘; 51 } 52 } 53 if(inArr(pos,‘left‘)!=-1){ 54 if(w-x>=50){ 55 oBox.style.width=w-x+‘px‘; 56 oBox.style.left=disL+x+‘px‘; 57 } 58 59 } 60 61 if(inArr(pos,‘right‘)!=-1){ 62 if(x+w>=50){ 63 oBox.style.width=x+w+‘px‘; 64 } 65 66 } 67 } 68 document.onmouseup=function(){ 69 document.onmousemove=document.onouseup=null; 70 } 71 } 72 73 74 oBox.onmousemove=fn; 75 function fn(e){ 76 e=e||event; 77 78 var 79 disx= e.clientX, 80 disy= e.clientY, 81 w=this.offsetWidth, 82 h=this.offsetHeight, 83 disL=this.offsetLeft, 84 disT=this.offsetTop, 85 pos=[]; 86 this.style.cursor=‘‘; 87 if(disx<disL+10){ 88 pos.push(‘left‘); 89 this.style.cursor = ‘w-resize‘; 90 } 91 if(disx>disL+w-10){ 92 pos.push(‘right‘); 93 this.style.cursor = ‘w-resize‘; 94 } 95 if(disy<disT+10){ 96 pos.push(‘top‘); 97 this.style.cursor = ‘n-resize‘; 98 } 99 if(disy>disT+h-10){ 100 pos.push(‘bottom‘); 101 this.style.cursor = ‘n-resize‘; 102 } 103 104 if(pos.length==2){ 105 if((inArr(pos,‘top‘)!=-1&&inArr(pos,‘right‘)!=-1)||(inArr(pos,‘left‘)!=-1&&inArr(pos,‘bottom‘)!=-1)){ 106 this.style.cursor=‘ne-resize‘; 107 }else{ 108 this.style.cursor=‘nw-resize‘; 109 } 110 111 } 112 return pos; 113 } 114 115 function inArr(arr,s){ 116 117 for(var i=0;i<arr.length;i++){ 118 if(arr[i]==s){ 119 return i; 120 } 121 } 122 return -1; 123 } 124 } 125 </script> 126 </head> 127 <body> 128 129 <div id="box"></div> 130 </body> 131 </html>
以上是关于多方向拖拽改变元素大小的主要内容，如果未能解决你的问题，请参考以下文章