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

巴特西

jquery 拖动改变div大小

最新文章

热门文章