拖动按钮时并行修改div的高度
[英]Modify the height of a div in parallel when I drag a button
问题描述
Requirements: 
要求：
When I drag the button vertically upwards, the height of the yellow div must decrease. 当我垂直向上拖动按钮时，黄色div的高度必须减小。
When I drag the button vertically downwards, the height of the yellow div must increase. 当我垂直向下拖动按钮时，黄色div的高度必须增加。
Problem: 问题：
When I drag the button vertically upwards, the height of the yellow div increases. 当我垂直向上拖动按钮时，黄色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>
the behavior of the yellow div is the inverse of how it should behave 黄色div的行为与应如何行为相反
Could you please help correct my code? 您能帮忙更正我的代码吗？
Thanks so much! 非常感谢！
1 个解决方案
解决方案1
0 已采纳 2018-04-25 23:13:57
The issue is that you're subtracting pY from test , when what you actually want to do is simply set test equal to pY . 问题是您要从test减去pY ，而您实际要做的只是将test设置为等于pY 。
Instead of test = test - pY , you're looking for test = pY . 您不是在寻找test = test - pY ，而是在寻找test = pY 。
This can be seen in the following: 可以在以下内容中看到：
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>
Note that you might want to subtract a few extra units of height to test to cover the height of the button. 请注意，您可能希望减去一些额外的高度单位，以test是否覆盖按钮的高度。 I've gone with test = pY - 10 in the following example: 在以下示例中，我使用了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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.