admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:4382回复:0

JQuery拖拽改变元素的尺寸

楼主#
更多 发布于:2013-09-13 15:33
分享到:
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了。先来看看效果:

图片:屏幕截图.jpg


完整代码
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style type="text/css">
#test {
    background: none repeat scroll 0 0 #F1F1F1;
    border: 1px solid #CCCCCC;
    cursor: move;
    height: 100px;
    left: 0;
    line-height: 100px;
    position: relative;
    text-align: center;
    top: 0;
    width: 250px;
}
</style>
</head>
<body>
<div id="test" >拉下我</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">
    /*
     * jQuery.Resize by wuxinxi007
     * Date: 2011-5-14
     */
    $(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>
</body>
</html>
游客

返回顶部