これは私のコードです。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が拡大し続けると予想していることですが、特定のポイントにドラッグした場合にのみ機能します
あなたの言葉遣いが少し曖昧なので、私はあなたの質問に答えることを試みることができるだけです。ただし、コードをコピーして、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.
}
}
同じことが次の2行のコードにも当てはまります。
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;
}
};
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加