弹指间随意拖动改变它的“胖瘦”

作者：Terry2017.05.19来源：Web前端之家浏览：11606评论:0

关键词：JQuery JS 拖动

QQ截图20170519095158.png

提到拖拽效果，会想到弹出层拖动效果、拖动同等宽高元素进行位置切换，还有就是拖动元素随意改变其大小。今天其实想分享的就是最后一种，也是我最近在项目中用到的。OK，让我们一起来学习下。

"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是动态改变的对象不同而已，主要在于top、left、width、height的运用，拖动元素时通过JS计算其所在的位置。我们用三步来学习。

第一步

鼠标按下mousedown计算位置：

$(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) 
    ) 
}

OK，了解完以上三步后，我们来看看完整的代码：

<!DOCTYPE html> 
<html> 
<head> 
<title>jquery拖动动画</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="https://jiangweishan.com/demo/js/jquery-2.2.4.min.js"></script> 
<style type="text/css"> 
*{margin: 0px;padding: 0px;} 
#test{width:400px; height: 300px; position: relative; margin: 20px auto 0px;background:#f5f5f5;border:solid #ddd 1px;text-align:center;line-height:300px;font-size:24px} 
</style> 
</head> 
<body> 
<div id="test">用你的鼠标来拖动我吧！</div> 
<script type="text/javascript"> 
    $(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>

大家可以点击预览看看效果，也可以编辑代码。通过这次的学习，希望大家能把这项技术运用到具体项目中。

赏您的支持是我们创作的动力！