Question

这是我的代码。我更喜欢在没有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会继续放大，但只有当我拖动到某一点时它才会起作用

Answer 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元素仅在垂直移动时调整大小，而不是水平移动。

Answer 2

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

首先，在document.body.onmousemove函数中：

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

当我认为您的意思是event.clientY和mouseStartY时，您写了event.clientX和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，而不是检查para功能中的window.onmousemove。即使您从para中删除了div，它仍会评估为true。

最后，您可以通过document.styleSheets[0].cssRules[1]而不是para直接修改para.style.width的样式，而不是通过document.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;
        }
    };
};

Answer 3

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

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/

为什么我的javascript拖动调整大小框不能按预期工作

3 个答案: