jquery 拖动改变div大小 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 版“元素拖拽改变大小”原型 </title> 
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
    /* 
     * jQuery.Resize by wuxinxi007 
     * Date: 2011-5-14 
     * blog : http://wuxinxi007.cnblogs.com/ 
     */ 
    $(function(){ 
        //绑定需要拖拽改变大小的元素对象 
        bindResize(document.getElementById('test')); 
    }); 
    
    function bindResize(el){ 
        //初始化参数 
        var els = el.style, 
            //鼠标的 X 和 Y 轴坐标 
            x = y = 0; 
        //邪恶的食指 
        $(el).mousedown(function(e){ 
            //按下元素后，计算当前鼠标与对象计算后的坐标 
            x = e.clientX - el.offsetWidth, 
            y = e.clientY - el.offsetHeight; 
            //在支持 setCapture 做些东东 
            el.setCapture ? ( 
                //捕捉焦点 
                el.setCapture(), 
                //设置事件 
                el.onmousemove = function(ev){ 
                    mouseMove(ev || event) 
                }, 
                el.onmouseup = mouseUp 
            ) : ( 
                //绑定事件 
                $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) 
            ) 
            //防止默认事件发生 
            e.preventDefault() 
        }); 
        //移动事件 
        function mouseMove(e){ 
            //宇宙超级无敌运算中... 
            els.width = e.clientX - x + 'px', 
            els.height = e.clientY - y + 'px' 
        } 
        //停止事件 
        function mouseUp(){ 
            //在支持 releaseCapture 做些东东 
            el.releaseCapture ? ( 
                //释放焦点 
                el.releaseCapture(), 
                //移除事件 
                el.onmousemove = el.onmouseup = null 
            ) : ( 
                //卸载事件 
                $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) 
            ) 
        } 
    } 
</script> 
<style type="text/css"> 
#test{ 
    position:absolute; 
    top:0;left:0; 
    width:200px; 
    height:100px; 
    background:#f1f1f1; 
    text-align:center; 
    line-height:100px; 
    border:1px solid #CCC; 
    cursor:move; 
} 
</style> 
</head> 

<body> 
    <div id="test">dgdg</div> 
</body> 
</html>

我当时用的时候，还要根据目前拖动的div的宽度来改变另一div的位置宽度等等，我就在 函数 mouseMove 下 加了这 $(".class").css("margin-left","你要加的值")；就可以搞成联动了。

出处：http://liucuan.iteye.com/blog/1328215

 

posted @ 2017-07-04 16:42  黑夜蓝天  阅读(2890)  评论(0)  编辑  收藏  举报