Why my javascript drag resize box doesn't work as expected

Question

This is my code. I prefer to create a resize box purely on javascript without jquery.The code enable me to resize the width of paragraph when i drag it over but it seems like it don't work as expected.

<html>
<head>
<style>

div{
    border: 1px solid black;
    width: 500px;
    height: 500px;
    padding: 0px;
    margin: 0px;

}

p{
    border: 1px solid red;
    position: absolute;
    height: 200px;
    width: 200px;
    padding: 0px;
    margin: 0px;
}
</style>
<script>
window.onload = function(){

    document.body.onmousedown = function(event){

         var mouseStartX = event.clientX;
         var mouseStartY = event.clientY;
       var div = document.getElementsByTagName("div");

       var para = document.createElement("p");

       div[0].appendChild(para);



         document.styleSheets[0].cssRules[1].style.top = mouseStartY;
              document.styleSheets[0].cssRules[1].style.left = mouseStartX;



        document.body.onmousemove = function(event){

            if(para){

            document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;



            }


        }

       document.body.onmouseup = function(){
            div[0].removeChild(para);

       }


    };

};
</script>
</head>
<body>
<div>



</div>
</body>
</html>

my problem is I expect that the p will keep on enlarge as I drag my mouse to the right,but it only work when I drag to a certain point

If you don't explain exactly what it was that you expected, it may be difficult for anyone to help. — Pointy, Jul 05 '13 at 15:51
@Pointy my problem is I expect that the p will keep on enlarge as I drag my mouse to the right,but it only work when I drag to a certain point. — dramasea, Jul 05 '13 at 16:08
What is this "certain point"? JavaScript can't follow your mouse outside the browser window. — wecsam, Jul 05 '13 at 16:12

score 1 · Answer 1 · answered Jul 05 '13 at 16:24

Use:

document.body.onmousemove = function (event) {
    if (para) {
        document.styleSheets[0].cssRules[1].style.width = event.clientX - mouseStartX;
    }
}

instead of:

document.body.onmousemove = function (event) {
    if (para) {
        document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
    }
}

Otherwise, the p element will only resize on vertical movement, not horizontal.

score 1 · Accepted Answer · answered Jul 05 '13 at 16:38

I can only attempt to answer your question because your wording is a bit vague. However, I copy and pasted your code into a test HTML file that I loaded into my web browser, and I can guess what the problem that you're having is. The problem is that the p enlarges as you drag your cursor, but it doesn't enlarge all the way so that the right border is in line with your cursor.

First of all, in your document.body.onmousemove function:

document.body.onmousemove = function (event) {
    if (para) {
        document.styleSheets[0].cssRules[1].style.width = event.clientY - mouseStartY;
    }
}

You wrote event.clientY and mouseStartY when I think that you meant event.clientX and mouseStartX. However, you are also modifying a CSS rule, so you have to append the unit px to the end of the width:

document.body.onmousemove = function (event) {
    if (para) {
        document.styleSheets[0].cssRules[1].style.width = (event.clientX - mouseStartX) + "px";
        // The parentheses are technically not required; I put them there for clarity.
    }
}

The same goes for these two lines of code:

document.styleSheets[0].cssRules[1].style.top = mouseStartY;
document.styleSheets[0].cssRules[1].style.left = mouseStartX;

You forgot to include the units. Just add + "px" before the end of each line:

document.styleSheets[0].cssRules[1].style.top = mouseStartY + "px";
document.styleSheets[0].cssRules[1].style.left = mouseStartX + "px";

Additionally, it is better just to delete window.onmousemove and window.onmouseup in your window.onmouseup function instead of checking for para in your window.onmousemove function. Even after you remove para from the div, it still evaluates to true.

Finally, instead of modifying the stylesheet via document.styleSheets[0].cssRules[1], you could just directly edit the style of para by using para.style.width instead of document.styleSheets[0].cssRules[1].style.width.

I rewrote your window.onload function like this:

window.onload = function(){
    document.body.onmousedown = function(event){
        var mouseStartX = event.clientX,
            mouseStartY = event.clientY,
            div = document.getElementsByTagName("div"),
            para = document.createElement("p");
        div[0].appendChild(para);
        para.style.top = mouseStartY + "px";
        para.style.left = mouseStartX + "px";
        document.body.onmousemove = function(event){
            para.style.width = event.clientX - mouseStartX + "px";
            //para.style.height = event.clientY - mouseStartY + "px";
            // Uncomment the line above if you want to drag the height, too.
        }
        document.body.onmouseup = function(){
            div[0].removeChild(para);
            document.body.onmousemove = null;
            document.body.onmouseup = null;
        }
    };
};

Stano · Answer 3 · 2013-07-06T07:39:08.623

Cross-browser compatible solution also using window scroll offset and mouse movement in all four quadrants:

window.onload = function () {
    var div = document.getElementsByTagName("div")[0];
    var para = null, mouseStartX, mouseStartY; //top & left coordinates of paragraph
    document.body.onmousedown = function (event) {
        if (para) {
            return;
        }
        event = event || window.event; // for IE8/7 http://stackoverflow.com/questions/7790725/javascript-track-mouse-position#7790764
        // https://developer.mozilla.org/en-US/docs/Web/API/window.scrollY#Notes
        var scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
        var scrollY = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        mouseStartX = event.clientX + scrollX;
        mouseStartY = event.clientY + scrollY;
        para = document.createElement("p");
        div.appendChild(para);
        para.style.top = mouseStartY + 'px';
        para.style.left = mouseStartX + 'px';
        para.style.width = '0px';
        para.style.height = '0px';
    };
    document.body.onmousemove = function (event) {
        if (!para) {
            return;
        }
        event = event || window.event;
        var scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
        var scrollY = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        var mouseCurrentX = event.clientX + scrollX;
        var mouseCurrentY = event.clientY + scrollY;
        if (mouseCurrentX >= mouseStartX) {
            para.style.left = mouseStartX + 'px';
            para.style.width = (mouseCurrentX - mouseStartX) + 'px';
        } else {
            para.style.left = mouseCurrentX + 'px';
            para.style.width = (mouseStartX - mouseCurrentX) + 'px';
        }
        if (mouseCurrentY >= mouseStartY) {
            para.style.top = mouseStartY + 'px';
            para.style.height = (mouseCurrentY - mouseStartY) + 'px';
        } else {
            para.style.top = mouseCurrentY + 'px';
            para.style.height = (mouseStartY - mouseCurrentY) + 'px';
        }
    };
    document.body.onmouseup = function () {
        div.removeChild(para);
        para = null;
    };
};

http://jsfiddle.net/hMbCF/1/

http://jsfiddle.net/hMbCF/1/show/

Why my javascript drag resize box doesn't work as expected

3 Answers3