码迷,mamicode.com
首页 > Web开发 > 详细

使用JS制作一个鼠标可拖的DIV(四)——缩放

时间:2014-09-02 19:48:55      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   使用   ar   for   

原理与鼠标拖动 DIV 相同。

 

下面就先实现一个在DIV的右上角显示一个小正方形(类似)。

当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小。

 

一、思路

1、鼠标按时事件。

这里要初始化数据。

同移动一样,给小正方形绑定鼠标按时事件。

(1)获得并保存要移动的元素(parent)的宽(parentWidth)与高(parentHeight)。

即:元素缩放前的宽与高。

(2)由于是要按比例缩放,所以,要在这时计算出宽与高的比例(scale),得到的结果保留一位小数。

(3)获得鼠标的 X 坐标(mouseX),用于计算鼠标移动前与移动后的位置。

2、鼠标拖动事件。

同移动一样,给 document 帮绑定移动事件。

由于小正方形是放在元素(parent)中的,为了避免绑定的鼠标按下事件与元素(parent)中相同的事件有冲突。

所以,在绑定document.onmousemove前,要先清空元素(parent)的onmousedown事件。

parent.onmousedown = function () { }
document.onmousemove = function (doc) {
}

(1)计算出:鼠标移动的差值(moveWidth) = 移动后的鼠标坐标(currentMouseX) - 移动前的鼠标坐标(mouseX)。

(2)元素(parent)缩放后的宽度(width) = 元素(parent)当前的宽度 + 鼠标移动的差值(moveWidth)

(3)元素(parent)缩放后的高度(height) = 元素(parent)缩放的后的宽度(width)X (1 / 宽与高的比例(scale))

即:height = width X (1 / scale)

注意,这里要使用四舍五入来取整。

(4)由于是要以元素(parent)左下角的坐标为定点,所以需要计算出元素(parent)左上角的 Y 坐标(top)的偏移量。

元素(parent)左上角的 Y 坐标(top) = 元素(parent)当前左上角的 Y 坐标 - (元素(parent)缩放后的高度(height) - 元素(parent)缩放前的高度(parentHeight))

即:

top = parent.offsetTop - (height - parentHeight);

设置元素(parent)左上角的 Y 坐标。

设置元素(parent)缩放后的宽度。

设置元素(parent)缩放后的高度。

parent.style.top = top + "px";
parent.style.width = width + "px";
parent.style.height = height + "px";

更新当前鼠标的 X 坐标(mouseX)。

更新当前元素的宽度(parentWidth)。

更新当前元素的高度(parentHeight)。

mouseX = currentMouseX;
parentWidth = parent.offsetWidth;
parentHeight = parent.offsetHeight;

3.鼠标放开事件

当鼠标放开时:

清除 document.onmousemove 事件。

重新绑定(parent)的 onmousedown 事件到 moveBind 函数。

二、实现

续上篇

首先,在元素(parent)里增加一个子DIV并绑定onmousedown事件到zoomBind函数,做为右上角的小正方形。

在 addElement 函数里增加:

var rightSize = "<div class=‘resize‘ onmousedown=‘zoomBind(this, event)‘></div>";

CSS样式是:

    .resize {
        width: 7px;
        height: 7px;
        background-color: #ddd;
        border: 1px solid #000;
        top: -5px;
        right: -5px;
        position: absolute;
        cursor: ne-resize;
    }

为了避免事件冲突,在 moveBind 函数的最开始增加一个 bool 类型的变量,当鼠标按下时,设置为 true, 放开时,设置为 false。

function moveBind(obj, evnt) {
        isMouseMove = true;
        /*...*/
}

moveBind 函数里绑定的onmouseup 事件:

document.onmouseup = function () {
            isMouseMove = false;
            document.onmousemove = function () { }
        };

现在创建zoomBind函数:

//是否元素缩放。
var isMouseZoom = false;

   function zoomBind(obj, evnt) {
        isMouseZoom = true;

        //设置最小宽度。
        var minWidth = 50;

        //获得元素对象。
        var parent = obj.parentNode;

        //获得当前鼠标位置。
        var mouseX = evnt.clientX;

        //获得元素的宽与高。
        var parentSize = findPosition(parent);

        var parentWidth = parentSize[4];
        var parentHeight = parentSize[5];

        //计算出宽与高的比例。
        var scale = (parentWidth / parentHeight).toFixed(1);

        parent.onmousedown = function () { }
        document.onmousemove = function (doc) {
            if (isMouseZoom) {
                //设置成绝对定位,让元素可以移动。
                parent.style.position = "absolute";

                //获得鼠标移动后的坐标。
                var currentMouseX = doc.clientX;

                //计算出移动后的坐标。
                var moveWidth = currentMouseX - mouseX;

                //计算宽度增加或减少的值,增加的量等于鼠标移位的量。
                var width = parent.offsetWidth + moveWidth;

                if (width > minWidth) {
                    //高度参数是:当前宽度的值 * (1 / 宽与高的比例)
                    var height = Math.round(width * (1 / scale));

                    //以元素左下角为定点,则左下角的 Y 坐标 = 当前元素的左上角的 Y 坐标 - (改变后的高度 - 改变前的高度)
                    var top = parent.offsetTop - (height - parentHeight);

                    parent.style.top = top + "px";
                    parent.style.width = width + "px";
                    parent.style.height = height + "px";

                    mouseX = currentMouseX;
                    parentWidth = parent.offsetWidth;
                    parentHeight = parent.offsetHeight;
                }
            }
        }

        document.onmouseup = function () {
            isMouseZoom = false;
            document.onmousemove = function () { }
            parent.onmousedown = function (e) {
                moveBind(parent, e);
            }
        };
    }

 

以下是完整源码:

这里使用的是 jquery-1.10.2.min.js

/*要引入 jquery */

    //禁止鼠标选中。
    document.onselectstart = new Function("event.returnValue=false;");

    var containerId = "innerContainer";
    var showId = "idShow";
    var moveElement = "div";

    //是否元素移动。
    var isMouseMove = false;

    //是否元素缩放。
    var isMouseZoom = false;

    var productLists = $("#products");

    //获得容器坐标。
    var setContainer = findPosition(document.getElementById(containerId));

    $("#ContainerWidth").attr("value", setContainer[4]);
    $("#ContainerHeight").attr("value", setContainer[5]);

    function addElement(obj) {
        var container = findPosition(document.getElementById(containerId));
        var containerLeft = container[0];
        var containerTop = container[1];
        var containerWidth = container[4];
        var containerHeight = container[5];

        //设置默认宽度与高度。
        var width = 50;
        var height = width * (1 / (obj.offsetWidth / obj.offsetHeight));

        var left = containerLeft + containerWidth / 2 - width / 2;
        var top = containerTop + containerHeight / 2 - height / 2;

        var style = "width:" + width + "px;height:" + height + "px; left:" + left + "px;top:" + top + "px; position:absolute;background: #ff0000;";
        var rightSize = "<div class=‘resize‘ onmousedown=‘zoomBind(this, event)‘></div>";
        $("#" + containerId).append("<div onmousedown=‘moveBind(this, event)‘ onmousemove=\"this.style.cursor=‘move‘\" style=‘" + style + "‘>" + rightSize + "</div>");

    }

    /****************************以下是元素缩放*******************************/

    function zoomBind(obj, evnt) {
        isMouseZoom = true;

        //设置最小宽度。
        var minWidth = 50;

        //获得元素对象。
        var parent = obj.parentNode;

        //获得当前鼠标位置。
        var mouseX = evnt.clientX;

        //获得元素的宽与高。
        var parentSize = findPosition(parent);

        var parentWidth = parentSize[4];
        var parentHeight = parentSize[5];

        //计算出宽与高的比例。
        var scale = (parentWidth / parentHeight).toFixed(1);

        parent.onmousedown = function () { }
        document.onmousemove = function (doc) {
            if (isMouseZoom) {
                //设置成绝对定位,让元素可以移动。
                parent.style.position = "absolute";

                //获得鼠标移动后的坐标。
                var currentMouseX = doc.clientX;

                //计算出移动后的坐标。
                var moveWidth = currentMouseX - mouseX;

                //计算宽度增加或减少的值,增加的量等于鼠标移位的量。
                var width = parent.offsetWidth + moveWidth;

                if (width > minWidth) {
                    //高度参数是:当前宽度的值 * (1 / 宽与高的比例)
                    var height = Math.round(width * (1 / scale));

                    //以元素左下角为定点,则左下角的 Y 坐标 = 当前元素的左上角的 Y 坐标 - (改变后的高度 - 改变前的高度)
                    var top = parent.offsetTop - (height - parentHeight);

                    parent.style.top = top + "px";
                    parent.style.width = width + "px";
                    parent.style.height = height + "px";

                    mouseX = currentMouseX;
                    parentWidth = parent.offsetWidth;
                    parentHeight = parent.offsetHeight;
                }
            }
        }

        document.onmouseup = function () {
            isMouseZoom = false;
            document.onmousemove = function () { }
            parent.onmousedown = function (e) {
                moveBind(parent, e);
            }
        };
    }

    /****************************以上是元素缩放*******************************/

    /****************************以下是元素拖动*******************************/
    //绑定移动事件。
    function moveBind(obj, evnt) {
        isMouseMove = true;

        //获得元素坐标。
        var left = obj.offsetLeft;
        var top = obj.offsetTop;
        var width = obj.offsetWidth;
        var height = obj.offsetHeight;

        //计算出鼠标的位置与元素位置的差值。
        var cleft = evnt.clientX - left;
        var ctop = evnt.clientY - top;

        //获得容器坐标。
        var container = findPosition(document.getElementById(containerId));
        var containerLeft = container[0];
        var containerTop = container[1];
        var containerWidth = container[4];
        var containerHeight = container[5];

        /*计算出容器的范围坐标。*/

        //开始 X 坐标。
        var startX = containerLeft;
        //开始 Y 坐标。
        var startY = containerTop;
        //结束 X 坐标。
        var maxX = startX + containerWidth - width;
        //结束 Y 坐标。
        var maxY = startY + containerHeight - height;

        //鼠标选中的元素设置成顶层。
        obj.style.zIndex = getMaxIndex() + 1;

        //输出显示。
        //show("idShow", startX, startY);
        document.onmousemove = function () { }
        document.onmousemove = function (doc) {

            if (isMouseMove) {
                //计算出移动后的坐标。
                var moveLeft = doc.clientX - cleft;
                var moveTop = doc.clientY - ctop;

                //设置成绝对定位,让元素可以移动。
                obj.style.position = "absolute";

                //不可以超出指定的范围。
                if (moveLeft >= startX && moveTop >= startY && moveLeft <= maxX && moveTop <= maxY) {
                    //当移动位置在范围内时,元素跟随鼠标移动。
                    obj.style.left = moveLeft + "px";
                    obj.style.top = moveTop + "px";
                } else {
                    /****************以下为处理当鼠标的位置不在范围内里,鼠标的移动,里面的元素也要跟着移动*****************/
                    //向右移动时,如果移动坐标没有大于最大 X 坐标,则移动,否则设置成最大 X 坐标的值。
                    if (moveLeft >= startX && moveLeft <= maxX) {
                        obj.style.left = moveLeft + "px";
                    } else if (moveLeft > maxX) {
                        obj.style.left = maxX + "px";
                    } else if (moveLeft < startX) {
                        obj.style.left = startX + "px";
                    }

                    //向下移动时,如果移动坐标没有大于最大 Y 坐标,则移动,否则设置成最大 Y 坐标的值。
                    if (moveTop >= startY && moveTop <= maxY) {
                        obj.style.top = moveTop + "px";
                    } else if (moveTop > maxY) {
                        obj.style.top = maxY + "px";
                    } else if (moveTop < startY) {
                        obj.style.top = startY + "px";
                    }
                }

                var objX = obj.offsetLeft - startX;
                var objY = obj.offsetTop - startY;

                var inputValue = obj.getElementsByTagName("input")[0];

                inputValue.value = objX + "," + objY + "," + width + "," + height;

                show(showId, moveLeft, moveTop);
            }
        }

        document.onmouseup = function () {
            isMouseMove = false;
            document.onmousemove = function () { }
        };
    }

    //获得元素的坐标与大小。
    function findPosition(oElement) {
        var x2 = 0;
        var y2 = 0;
        var width = oElement.clientWidth;
        var height = oElement.clientHeight;
        //alert(width + "=" + height);
        if (typeof (oElement.offsetParent) != ‘undefined‘) {
            for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                posX += oElement.offsetLeft;
                posY += oElement.offsetTop;
            }
            x2 = posX + width;
            y2 = posY + height;
            return [posX, posY, x2, y2, width, height];

        } else {
            x2 = oElement.x + width;
            y2 = oElement.y + height;
            return [oElement.x, oElement.y, x2, y2, width, height];
        }
    }

    //获得最大 Z 坐标。
    function getMaxIndex() {
        var index = 0;
        var ds = document.getElementById(containerId).getElementsByTagName(moveElement);
        var length = document.getElementById(containerId).getElementsByTagName(moveElement).length;

        for (var loop = 0; loop < length; loop++) {
            if (ds[loop].style.zIndex > index) index = ds[loop].style.zIndex;
        }

        return parseInt(index);
    }

    //显示坐标信息。
    function show(id, x, y) {
        document.getElementById(id).innerHTML = "left:" + x + ";top:" + y;
    }

    /*****************************以上是元素拖动*******************************/

 

完整CSS:

    .resize {
        width: 7px;
        height: 7px;
        background-color: #ddd;
        border: 1px solid #000;
        top: -5px;
        right: -5px;
        position: absolute;
        cursor: ne-resize;
    }

    #mainContainer {
        border: 10px solid #990000;
        width: 600px;
        height: 300px;
    }

    #innerContainer {
        width: 100%;
        height: 100%;
    }

    #Drag {
        /*border: 5px solid #C4E3FD;*/
        background: #C4E3FD;
        width: 50px;
        height: 50px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #Drag2 {
        /*border: 5px solid #C4E3FD;*/
        background: #ff0000;
        width: 80px;
        height: 80px;
        top: 50px;
        left: 50px;
        z-index: 3;
        /*background: url(http://pic.cnitblog.com/face/614265/20140725231849.png) no-repeat;*/
    }

完整 HTML:

<div id="mainContainer">
    <div id="innerContainer">
    </div>
</div>

<br />拖放状态:<span id="idShow">未开始</span>
<br /><span id="testShow"></span>
<div>
    <img src="http://pic.cnitblog.com/face/614265/20140725231849.png" onclick="addElement(this)" />
</div>

 

使用JS制作一个鼠标可拖的DIV(四)——缩放

标签:style   blog   http   color   os   io   使用   ar   for   

原文地址:http://www.cnblogs.com/cjnmy36723/p/3952072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!