0

这是我的代码。我更喜欢在没有 jquery 的情况下纯粹在 javascript 上创建一个调整大小框。代码使我能够在拖动它时调整段落的宽度，但它似乎没有按预期工作。

<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>

我的问题是我希望当我将鼠标向右拖动时 p 会继续放大，但它只有在我拖动到某个点时才有效

4

3 回答 3

1

采用：

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

代替：

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

否则，p元素只会在垂直移动时调整大小，而不是水平移动。

于 2013-07-05T16:24:15.840 回答
1

我只能尝试回答你的问题，因为你的措辞有点含糊。但是，我将您的代码复制并粘贴到我加载到我的网络浏览器中的测试 HTML 文件中，我可以猜到您遇到的问题是什么。问题是p拖动光标时会放大，但不会一直放大，因此右边框与光标对齐。

首先，在您的document.body.onmousemove功能中：

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

你写了event.clientYandmouseStartY当我认为你的意思是event.clientXand mouseStartX。但是，您也在修改 CSS 规则，因此您必须将单位附加px到宽度的末尾：

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.
    }
}

这两行代码也是如此：

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

你忘了包括单位。只需+ "px"在每行末尾添加：

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

此外，最好只删除window.onmousemove和window.onmouseup在您的函数中，而不是在您的window.onmouseup函数中检查。即使从 中删除，它仍然评估为。parawindow.onmousemoveparadivtrue

最后，您可以直接使用而不是document.styleSheets[0].cssRules[1]直接编辑样式表，而不是通过 修改样式表。parapara.style.widthdocument.styleSheets[0].cssRules[1].style.width

我像这样重写了你的window.onload函数：

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;
        }
    };
};
于 2013-07-05T16:38:46.787 回答
0

跨浏览器兼容的解决方案也在所有四个象限中使用窗口滚动偏移和鼠标移动：

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/

于 2013-07-05T21:24:15.007 回答