zoukankan html css js c++ java

多方向拖拽改变元素大小

拖拽：
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              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>

查看全文

相关阅读:
Qt画笔实现折线图
 Qt动态布局
 ffmpeg录制流媒体，正常方式停止录制
 解决libvlc_media_player_stop时死锁的方法
 Ubuntu 16 修改时区！
qt窗口最小化之后无法打开
 Qt 之去除窗口部件被选中后的焦点虚线框
 WINDOWS中, 如何查看一个运行中的程序是64位还是32位的
 DHTMLX学习总结
 mui plus.uploader.createUpload 上传文件服务端获取文件名中文乱码问题

原文地址：https://www.cnblogs.com/jiechen/p/5510392.html