Modify the height of a div in parallel when I drag a button
Question
Requirements:
When I drag the button vertically upwards, the height of the yellow div must decrease.
When I drag the button vertically downwards, the height of the yellow div must increase.
Problem:
When I drag the button vertically upwards, the height of the yellow div increases.
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
Could you please help correct my code?
Thanks so much!
1 answers
solution1
0 ACCPTED 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 .
Instead of test = test - pY , you're looking for 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. I've gone with test = pY - 10 in the following example:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.