用纯JS从左到右调整框的宽度大小。

huangapple
go评论107阅读模式
英文:

Resizing a box width from left to right using pure JS

问题

I am trying to make a box move and resize.
我正在尝试让一个框移动和调整大小。

I have perfected the moving part and the resizing for the right and bottom.
我已经完善了移动部分和右侧和底部的调整大小部分。

I am having an issue resizing left and top.
我在调整左侧和顶部时遇到问题。

Here are my initial vars ...
以下是我的初始变量...

var mousePosition;
var offset;
var wrSizeOffset, wlSizeOffset, hbSizeOffset;
var div;
var isDown = false;
var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
var divWidth, divHeight;

After that I check whether the box is on mouse down ...
之后，我检查鼠标是否按下了框...

div.addEventListener('mousedown', function(e){

isDown = true;

offset = {
x: div.offsetLeft - e.clientX,
y: div.offsetTop - e.clientY
}

// get width without px
divWidth = parseInt(div.style.width, 10);

});

And then I check mouse on move like so ...
然后我检查鼠标的移动...

document.addEventListener('mousemove', function(e){

mousePosition = {
x: e.clientX,
y: e.clientY
}

// move div while mouse is down
if(isDown){
div.style.left = (mousePosition.x + offset.x) + 'px';
div.style.top = (mousePosition.y + offset.y) + 'px';
}

// resize the div from left to right
// I am having no issues here
if(wrSizeDown){
div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
}

// resizing the div from right to left
// here is where I am having an issue ...
if(wlSizeDown){
div.style.width = divWidth - (mousePosition.x - wlSizeOffset.x) + 'px';
// specially the below line of code
div.style.left = divWidth + (mousePosition.x - wlSizeOffset.x) + 'px';
}

});

Whenever I resize from right to left the div jumps around like it's adding to the style.left
每当我从右侧调整大小到左侧时，框会像添加到style.left一样跳动。

How can I make this work?
我该如何使其工作？

Here is an example ...
以下是一个示例...

英文:

I am trying to make a box move and resize.

I have perfected the moving part and the resizing for the right and bottom.

I am having an issue resizing left and top.

Here are my initial vars ...

  1. var mousePosition;
  2. var offset;
  3. var wrSizeOffset, wlSizeOffset, hbSizeOffset;
  4. var div;
  5. var isDown = false;
  6. var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
  7. var divWidth, divHeight;

After that I check whether the box is on mouse down ...

  1. div.addEventListener('mousedown', function(e){
  3.    isDown = true;
  5.    offset = {
  6.       x: div.offsetLeft - e.clientX,
  7.       y: div.offsetTop - e.clientY
  8.    }
  10.    // get width without px
  11.    divWidth = parseInt(div.style.width, 10);
  13. });

And then I check mouse on move like so ...

  1. document.addEventListener('mousemove', function(e){
  3. mousePosition = {
  4.   x: e.clientX,
  5.   y: e.clientY
  6. }
  8. // move div while mouse is down
  9. if(isDown){
  10.   div.style.left = (mousePosition.x + offset.x) + 'px';
  11.   div.style.top = (mousePosition.y + offset.y) + 'px';
  12. }
  14. // resize the div from left to right
  15. // I am having no issues here
  16. if(wrSizeDown){
  17.   div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + 'px';
  18. }
  20. // resizing the div from right to left
  21. // here is where I am having an issue ...
  22. if(wlSizeDown){
  23.   div.style.width = divWidth - (mousePosition.x - wlSizeOffset.x) + 'px';
  24.   // specially the below line of code
  25.   div.style.left = divWidth + (mousePosition.x - wlSizeOffset.x) + 'px';
  26. }
  28. });

Whenever I resize from right to left the div jumps around like it's adding to the style.left

How can I make this work?

Here is an example ...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var mousePosition;
  2. var offset;
  3. var wrSizeOffset, wlSizeOffset, hbSizeOffset;
  4. var div;
  5. var isDown = false;
  6. var wlSizeDown, wrSizeDown, htSizeDown, hbSizeDown = false;
  7. var divWidth, divHeight;
  9. div = document.createElement(&#39;div&#39;);
  10. div.style.position = &#39;relative&#39;;
  11. div.style.left = &#39;100px&#39;;
  12. div.style.top = &#39;100px&#39;;
  13. div.style.width = &#39;100px&#39;;
  14. div.style.height = &#39;100px&#39;;
  15. div.style.backgroundColor = &#39;red&#39;;
  16. div.style.border = &#39;1px solid black&#39;;
  18. wrSize = document.createElement(&#39;div&#39;);
  19. wrSize.style.position = &#39;absolute&#39;;
  20. wrSize.style.right = &#39;-10px&#39;;
  21. wrSize.style.top = &#39;40px&#39;;
  22. wrSize.style.width = &#39;20px&#39;;
  23. wrSize.style.height = &#39;20px&#39;;
  24. wrSize.style.backgroundColor = &#39;black&#39;;
  25. wrSize.style.border = &#39;1px solid black&#39;;
  27. wlSize = document.createElement(&#39;div&#39;);
  28. wlSize.style.position = &#39;absolute&#39;;
  29. wlSize.style.left = &#39;-10px&#39;;
  30. wlSize.style.top = &#39;40px&#39;;
  31. wlSize.style.width = &#39;20px&#39;;
  32. wlSize.style.height = &#39;20px&#39;;
  33. wlSize.style.backgroundColor = &#39;black&#39;;
  34. wlSize.style.border = &#39;1px solid black&#39;;
  36. htSize = document.createElement(&#39;div&#39;);
  37. htSize.style.position = &#39;absolute&#39;;
  38. htSize.style.left = &#39;40px&#39;;
  39. htSize.style.top = &#39;-10px&#39;;
  40. htSize.style.width = &#39;20px&#39;;
  41. htSize.style.height = &#39;20px&#39;;
  42. htSize.style.backgroundColor = &#39;black&#39;;
  43. htSize.style.border = &#39;1px solid black&#39;;
  45. hbSize = document.createElement(&#39;div&#39;);
  46. hbSize.style.position = &#39;absolute&#39;;
  47. hbSize.style.left = &#39;40px&#39;;
  48. hbSize.style.bottom = &#39;-10px&#39;;
  49. hbSize.style.width = &#39;20px&#39;;
  50. hbSize.style.height = &#39;20px&#39;;
  51. hbSize.style.backgroundColor = &#39;black&#39;;
  52. hbSize.style.border = &#39;1px solid black&#39;;
  54. document.body.appendChild(div);
  55. div.appendChild(wrSize);
  56. div.appendChild(wlSize);
  57. div.appendChild(htSize);
  58. div.appendChild(hbSize);
  60. div.addEventListener(&#39;mousedown&#39;, function(e){
  62.   isDown = true;
  64.   offset = {
  65.     x: div.offsetLeft - e.clientX,
  66.     y: div.offsetTop - e.clientY
  67.   }
  69. });
  71. wrSize.addEventListener(&#39;mousedown&#39;, function(e){
  73.   wrSizeDown = true;
  75.   wrSizeOffset = {
  76.     x: e.clientX,
  77.     y: e.clientY
  78.   }
  80.   divWidth = parseInt(div.style.width, 10);
  82. });
  84. wlSize.addEventListener(&#39;mousedown&#39;, function(e){
  86.   wlSizeDown = true;
  88.   wlSizeOffset = {
  89.     x: e.clientX,
  90.     y: e.clientY
  91.   }
  93.   divWidth = parseInt(div.style.width, 10);
  95.   console.log(divWidth);
  96.   console.log(wlSizeOffset.x);
  98. });
  100. hbSize.addEventListener(&#39;mousedown&#39;, function(e){
  102.   hbSizeDown = true;
  104.   hbSizeOffset = {
  105.     x: e.clientX,
  106.     y: e.clientY
  107.   }
  109.   divHeight = parseInt(div.style.height, 10);
  111. });
  113. document.addEventListener(&#39;mouseup&#39;, function(e){
  115.   isDown = false;
  116.   wrSizeDown = false;
  117.   wlSizeDown = false;
  118.   hbSizeDown = false;
  120. });
  122. document.addEventListener(&#39;mousemove&#39;, function(e){
  124.   mousePosition = {
  125.     x: e.clientX,
  126.     y: e.clientY
  127.   }
  129.   if(isDown &amp;&amp; (!wrSizeDown &amp;&amp; !wlSizeDown &amp;&amp; !hbSizeDown)){
  130.     div.style.left = (mousePosition.x + offset.x) + &#39;px&#39;;
  131.     div.style.top = (mousePosition.y + offset.y) + &#39;px&#39;;
  132.   }
  134.   if(wrSizeDown){
  135.     div.style.width = divWidth + mousePosition.x - wrSizeOffset.x + &#39;px&#39;;
  136.   }
  138.   if(hbSizeDown){
  139.     div.style.height = divHeight + mousePosition.y - hbSizeOffset.y + &#39;px&#39;;
  140.   }
  142.   if(wlSizeDown){
  143.     div.style.width = divWidth - wlSizeOffset.x + mousePosition.x + &#39;px&#39;;
  144.     div.style.left = divWidth + wlSizeOffset.x - mousePosition.x + &#39;px&#39;;
  145.   }
  147. });

<!-- language: lang-css -->

  1. body {
  2.   margin: 0px;
  3. }
  5. * {
  6.   box-sizing: border-box;
  7. }
  9. #box{
  10.   position: absolute;
  11.   display: block;
  12.   top: 50px;
  13.   left: 50px;
  14.   width: 200px;
  15.   height: 200px;
  16.   background-color: #d80000;
  17.   border: 1px solid #000;
  18. }

<!-- end snippet -->

答案1

得分: 1

我不看到顶部的事件监听器。但是当你按住wlSizeDown时，需要这样计算左边：

div.style.left = divWidth - (wlSizeOffset.x - mousePosition.x) + 'px';

对于htSizeDown事件监听器被创建：

  1. div.style.height = divHeight - mousePosition.y + htSizeOffset.y + 'px';
  2. div.style.top = divHeight + mousePosition.y - htSizeOffset.y + 'px';
英文:

I don't see an eventlistener for the top at all. But when you're holding down wlSizeDown, you need to calculate left like so:

div.style.left = divWidth - (wlSizeOffset.x - mousePosition.x) + &#39;px&#39;;

and for htSizeDown event listener is created:

  1. div.style.height = divHeight - mousePosition.y + htSizeOffset.y + &#39;px&#39;;
  2. div.style.top = divHeight + mousePosition.y - htSizeOffset.y + &#39;px&#39;;
  4. </details>
  8. # 答案2
  9. **得分**: 0
  11. 我已找到解决方案。
  13. 以下是代码...
  15. ```javascript
  16. var mousePosition;
  17. var offset;
  18. var isDown = false;
  19. var isResize = false;
  20. var div, resize;
  21. var divWidth, divHeight;
  22. var originalWidth, originalHeight; // 加入了这一行
  24. div = document.createElement('div');
  25. resize = document.createElement('div');
  27. div.setAttribute('id', 'div');
  28. resize.setAttribute('id', 'resize');
  30. document.body.appendChild(div);
  31. div.appendChild(resize);
  33. div.addEventListener('mousedown', function(e){
  35.   isDown = true;
  37.   offset = {
  38.     x: div.offsetLeft - e.clientX,
  39.     y: div.offsetTop - e.clientY
  40.   }
  42. });
  44. document.addEventListener('mouseup', function(e){
  46.   isDown = false;
  47.   isResize = false;
  49. });
  51. resize.addEventListener('mousedown', function(e){
  53.   isResize = true;
  55.   resizeOffset = {
  56.     x: e.clientX,
  57.     y: e.clientY
  58.   }
  60.   divWidth = div.getBoundingClientRect().width;
  61.   originalWidth = div.getBoundingClientRect().left; // 在这里我弄错了
  63. });
  65. document.addEventListener('mousemove', function(e){
  67.   mousePosition = {
  68.     x: e.clientX,
  69.     y: e.clientY
  70.   }
  72.   if(isDown && !isResize){
  73.     div.style.left = (mousePosition.x + offset.x) + 'px';
  74.     div.style.top = (mousePosition.y + offset.y) + 'px';
  75.   }
  77.   if(isResize){
  78.     div.style.width = divWidth - mousePosition.x + resizeOffset.x + 'px';
  79.     div.style.left = originalWidth + mousePosition.x - resizeOffset.x + 'px'; // 我添加了originalWidth而不是divWidth
  80.   }
  82. });
  83. ```
  85. ```css
  86. body{
  87.   margin: 0px;
  88. }
  90. *{
  91.   box-sizing: border-box;
  92. }
  94. #div{
  95.   position: relative;
  96.   display: block;
  97.   top: 50px;
  98.   left: 50px;
  99.   width: 200px;
  100.   height: 200px;
  101.   background-color: #ce4257;
  102.   border: 5px solid #000;
  103.   border-radius: 5px;
  104. }
  106. #resize{
  107.   position: absolute;
  108.   display: block;
  109.   top: calc(50% - 30px);
  110.   left: -15px;
  111.   width: 30px;
  112.   height: 30px;
  113.   background-color: #000;
  114.   border-radius: 5px;
  115. }
  116. ```
  118. 请阅读注释以了解我所做的更改。
  120. 如果您在理解解决方案方面遇到问题，请留下评论，我会提供帮助。
  122. 谢谢，
  123. Farris
  125. <details>
  126. <summary>英文:</summary>
  128. I have found the solution.
  130. Here is the code ...
  132. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  134. &lt;!-- language: lang-js --&gt;
  136.     var mousePosition;
  137.     var offset;
  138.     var isDown = false;
  139.     var isResize = false;
  140.     var div, resize;
  141.     var divWidth, divHeight;
  142.     var originalWidth, originalHeight; // added this too
  144.     div = document.createElement(&#39;div&#39;);
  145.     resize = document.createElement(&#39;div&#39;);
  147.     div.setAttribute(&#39;id&#39;, &#39;div&#39;);
  148.     resize.setAttribute(&#39;id&#39;, &#39;resize&#39;);
  150.     document.body.appendChild(div);
  151.     div.appendChild(resize);
  153.     div.addEventListener(&#39;mousedown&#39;, function(e){
  155.       isDown = true;
  157.       offset = {
  158.         x: div.offsetLeft - e.clientX,
  159.         y: div.offsetTop - e.clientY
  160.       }
  162.     });
  164.     document.addEventListener(&#39;mouseup&#39;, function(e){
  166.       isDown = false;
  167.       isResize = false;
  169.     });
  171.     resize.addEventListener(&#39;mousedown&#39;, function(e){
  173.       isResize = true;
  175.       resizeOffset = {
  176.         x: e.clientX,
  177.         y: e.clientY
  178.       }
  180.       divWidth = div.getBoundingClientRect().width;
  181.       originalWidth = div.getBoundingClientRect().left; // here is where i missed up
  183.     });
  185.     document.addEventListener(&#39;mousemove&#39;, function(e){
  187.       mousePosition = {
  188.         x: e.clientX,
  189.         y: e.clientY
  190.       }
  192.       if(isDown &amp;&amp; !isResize){
  193.         div.style.left = (mousePosition.x + offset.x) + &#39;px&#39;;
  194.         div.style.top = (mousePosition.y + offset.y) + &#39;px&#39;;
  195.       }
  197.       if(isResize){
  198.         div.style.width = divWidth - mousePosition.x + resizeOffset.x + &#39;px&#39;;
  199.         div.style.left = originalWidth + mousePosition.x - resizeOffset.x + &#39;px&#39;; // added originalWidth instead of divWidth
  200.       }
  202.     });
  204. &lt;!-- language: lang-css --&gt;
  206.     body{
  207.       margin: 0px;
  208.     }
  210.     *{
  211.       box-sizing: border-box;
  212.     }
  214.     #div{
  215.       position: relative;
  216.       display: block;
  217.       top: 50px;
  218.       left: 50px;
  219.       width: 200px;
  220.       height: 200px;
  221.       background-color: #ce4257;
  222.       border: 5px solid #000;
  223.       border-radius: 5px;
  224.     }
  226.     #resize{
  227.       position: absolute;
  228.       display: block;
  229.       top: calc(50% - 30px);
  230.       left: -15px;
  231.       width: 30px;
  232.       height: 30px;
  233.       background-color: #000;
  234.       border-radius: 5px;
  235.     }
  237. &lt;!-- end snippet --&gt;
  239. Please read the comments to understand what I have done.
  241. If you are facing problems understanding the solution please comment and I will help.
  243. Thank you,
  244. Farris
  246. </details>

huangapple
  • 本文由 发表于 2023年6月29日 07:53:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/76577328.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定