拖动按钮时并行修改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