Почему мой javascript перетащить размер окна не работает, как ожидалось

Вопрос:

Это мой код. Я предпочитаю создавать коробку с изменением размера только на javascript без jquery. Код позволяет мне изменять размер абзаца, когда я его перетаскиваю, но похоже, что он не работает должным образом.

<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 будет продолжать увеличиваться, когда я перетаскиваю мышь вправо, но он работает только при перетаскивании в определенную точку

Лучший ответ:

Я могу только попытаться ответить на ваш вопрос, потому что ваша формулировка немного расплывчата. Однако я копировал и вставлял ваш код в тестовый 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;
        }
    };
};

Ответ №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 будет изменяться только по вертикали, а не по горизонтали.

Ответ №2

Кросс-браузерное решение, также использующее сдвиг прокрутки окон и движение мыши во всех четырех квадрантах:

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/

Оцените статью
TechArks.Ru
Добавить комментарий