随笔 - 22  文章 - 467  trackbacks - 0
<2024年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(25)

随笔分类(74)

文章分类(1)

收藏夹(277)

在线工具

在线资料

最新随笔

搜索

  •  

积分与排名

  • 积分 - 216772
  • 排名 - 260

最新评论

阅读排行榜

评论排行榜

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drag to resize</title>
</head>
<script type="text/javascript"> 
  
        
var obj_resize = false;
        
var obj_Ofx = 0;
        
var obj_Vfx = 0;
        
var obj_Ofy = 0;
        
var obj_Vfy = 0;
 
        
function obj_up(id){

     
if (obj_resize) {
                document.getElementById(id).style.cursor 
= "auto";
                document.getElementById(id).releaseCapture();
                obj_resize 
= false
            }
        }
    
function obj_move(id){
            
        
if(obj_resize){
            
if (event.clientX - parseInt(document.getElementById(id).offsetLeft) > 70 && event.clientY - parseInt(document.getElementById(id).offsetTop) > 70) {
                
if (event.clientX - parseInt(document.getElementById(id).offsetLeft) < 1024 && event.clientY - parseInt(document.getElementById(id).offsetTop) < 768) {
                    document.getElementById(id).style.width 
= event.clientX - parseInt(document.getElementById(id).offsetLeft);
                    document.getElementById(id).style.height 
= event.clientY - parseInt(document.getElementById(id).offsetTop);
                    document.getElementById(
"div1td2").style.height = event.clientY - parseInt(document.getElementById(id).offsetTop);
                }
            }
        }

    }
    
function obj_lsdown(id){
        
var curX = event.clientX + document.documentElement.scrollLeft;
        
var curY = event.clientY + document.documentElement.scrollTop;
        
var moveallwidth = parseInt(document.getElementById(id).offsetLeft) + parseInt(document.getElementById(id).offsetWidth);
        
var moveallheight = parseInt(document.getElementById(id).offsetTop) + parseInt(document.getElementById(id).offsetHeight);
        
var moveleft = parseInt(moveallwidth) - parseInt(curX);
        
var movetop = parseInt(moveallheight) - parseInt(curY);    
        
if (moveleft <= 70 && moveleft >= 0 && movetop <= 70 && movetop >= 0) { 
            document.getElementById(id).style.cursor
="nw-resize";
            document.getElementById(id).setCapture();
            obj_resize 
= true
        }    
    }
    
</script>
<body bgcolor="#ffffff">
    
<div id="div1"
        style
="width: 300px; height: 300px; top: 200px; left: 300px; zIndex: 100; position: absolute; cursor: auto;"
        onmousedown
="obj_lsdown('div1');" onmousemove="obj_move('div1');"
        onmouseup
="obj_up('div1');">
        
<table border="0" cellpadding="0" cellspacing="0" id="table1"
            width
="100%" style="table-layout: fixed;">

            
<tr>
                
<td style="height: 300px;" id="div1td2" bgcolor="#6666ff"><span>content</span>
                
</td>
            
</tr>
        
</table>
    
</div>
</body>
</html>
posted on 2011-06-08 16:41 ApolloDeng 阅读(708) 评论(1)  编辑  收藏

FeedBack:
# re: Why this simple "drag to resize block" JavaScript doesn't work in Chrome? 2011-06-13 19:06 Aloong
OK,这个只是在stackOverFlow问问题为了方便把代码贴在这里,这是因为.setCapture();和.releaseCapture();是IE下才能用的,所以Chrome下不能使用,后来没用这个代码,用了雅虎的YUI了.  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: