鼠标拖动变化大小

如何用鼠标拖动元素变化大小，首先我们要去获取到这个元素，然后分为三个阶段。

第一步是鼠标按下时，得到鼠标当前的位置，还要获取到元素当前的宽高，宽高值记得用parseInt转换成数字，因为没见转换前的宽高都是带有单位px，在后面不能直接用于计算。

第二步就是鼠标移动时，给选中元素不停的赋值，值为鼠标按下时的初始宽高加上鼠标当前位置的X轴Y轴值来减去鼠标按下时获取到的X轴Y轴值。

最后一步，鼠标抬起赋值空，这次的拖动变化大小就完成了。

//鼠标拖动变换大小

function Conversion(obj) {

    obj.onmousedown
= function (ev) { //鼠标按下时

        ev = ev ||
event;

        //获取鼠标的位置

        var disX =
ev.clientX;//鼠标X轴上的位置

        var disY =
ev.clientY;//鼠标Y轴上的位置

        //获取宽高

        var
objwidth = parseInt(obj.style.width);

        var objheight
= parseInt(obj.style.height);

       
document.onmousemove = function (ev) { //鼠标移动时

            ev = ev
|| event;

            //宽高在移动的时候在原来的宽高上再加上当前鼠标的位置减去之前鼠标的位置

           
obj.style.width = (objwidth + (ev.clientX- disX)) + 'px';

            obj.style.height
= (objheight + (ev.clientY- disY)) + 'px';

        };

       
document.onmouseup = function () { //鼠标抬起时

           
document.onmouseup = document.onmousemove = null;

        };

    };

}

这是没有拖动前的效果

这是我们拖动后的效果