拖動按鈕時並行修改div的高度

Question

要求：

當我垂直向上拖動按鈕時，黃色div的高度必須減小。

當我垂直向下拖動按鈕時，黃色div的高度必須增加。

問題：

當我垂直向上拖動按鈕時，黃色div的高度會增加。

 var ele = document.getElementsByClassName ("button")[0]; //ele.onmousedown = eleMouseDown; ele.addEventListener ("mousedown" , eleMouseDown , false); function eleMouseDown () { stateMouseDown = true; document.addEventListener ("mousemove" , eleMouseMove , false); } function eleMouseMove (ev) { var pY = ev.pageY; ele.style.top = pY + "px"; document.addEventListener ("mouseup" , eleMouseUp , false); var test= document.getElementById("mybox").clientWidth; test = test - pY; var test2= test.toString(); test2= test2+"px"; document.getElementById("mybox").style.height=test2; } function eleMouseUp () { document.removeEventListener ("mousemove" , eleMouseMove , false); document.removeEventListener ("mouseup" , eleMouseUp , false); }

 .test{ width:150px; height:150px; background-color:yellow; } .button{ position: absolute; }

 <html> <body> <div id="mybox" class="test" > test</div> <div><button class="button">drag me</button></div> </body> </html>

黃色div的行為與應如何行為相反

您能幫忙更正我的代碼嗎？

非常感謝！

Answer 1

問題是您要從test減去pY ，而您實際要做的只是將test設置為等於pY 。

您不是在尋找test = test - pY ，而是在尋找test = pY 。

可以在以下內容中看到：

 var ele = document.getElementsByClassName("button")[0]; //ele.onmousedown = eleMouseDown; ele.addEventListener("mousedown", eleMouseDown, false); function eleMouseDown() { stateMouseDown = true; document.addEventListener("mousemove", eleMouseMove, false); } function eleMouseMove(ev) { var pY = ev.pageY; ele.style.top = pY + "px"; document.addEventListener("mouseup", eleMouseUp, false); var test = document.getElementById("mybox").clientWidth; test = pY; var test2 = test.toString(); test2 = test2 + "px"; document.getElementById("mybox").style.height = test2; } function eleMouseUp() { document.removeEventListener("mousemove", eleMouseMove, false); document.removeEventListener("mouseup", eleMouseUp, false); }

 .test { width: 150px; height: 150px; background-color: yellow; } .button { position: absolute; }

 <html> <body> <div id="mybox" class="test"> test</div> <div> <button class="button">drag me</button> </div> </body> </html>

請注意，您可能希望減去一些額外的高度單位，以test是否覆蓋按鈕的高度。 在以下示例中，我使用了test = pY - 10 ：

 var ele = document.getElementsByClassName("button")[0]; //ele.onmousedown = eleMouseDown; ele.addEventListener("mousedown", eleMouseDown, false); function eleMouseDown() { stateMouseDown = true; document.addEventListener("mousemove", eleMouseMove, false); } function eleMouseMove(ev) { var pY = ev.pageY; ele.style.top = pY + "px"; document.addEventListener("mouseup", eleMouseUp, false); var test = document.getElementById("mybox").clientWidth; test = pY - 10; var test2 = test.toString(); test2 = test2 + "px"; document.getElementById("mybox").style.height = test2; } function eleMouseUp() { document.removeEventListener("mousemove", eleMouseMove, false); document.removeEventListener("mouseup", eleMouseUp, false); }

 .test { width: 150px; height: 150px; background-color: yellow; } .button { position: absolute; }

 <html> <body> <div id="mybox" class="test"> test</div> <div> <button class="button">drag me</button> </div> </body> </html>

拖動按鈕時並行修改div的高度

問題描述

1 個解決方案

解決方案1
0 已采納 2018-04-25 23:13:57

拖動按鈕時並行修改div的高度

問題描述

1 個解決方案

解決方案1 0 已采納 2018-04-25 23:13:57

解決方案1
0 已采納 2018-04-25 23:13:57