当前位置:   article > 正文

JavaScript和vue实现左右两栏,中间拖动按钮可以拖动左右两边的宽度

JavaScript和vue实现左右两栏,中间拖动按钮可以拖动左右两边的宽度

JavaScript实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>拖动效果</title>
  5. <style>
  6. body, html {
  7. margin: 0;
  8. padding: 0;
  9. height: 100%;
  10. font-family: Arial, sans-serif;
  11. }
  12. .container {
  13. display: flex;
  14. height: 100vh;
  15. position: relative;
  16. }
  17. .left-column, .right-column {
  18. flex-grow: 1;
  19. padding: 20px;
  20. box-sizing: border-box;
  21. }
  22. .left-column {
  23. background-color: #f0f0f0;
  24. }
  25. .right-column {
  26. background-color: #e0e0e0;
  27. }
  28. .divider {
  29. position: absolute;
  30. top: 0;
  31. bottom: 0;
  32. width: 10px;
  33. cursor: ew-resize;
  34. background-color: #ccc;
  35. z-index: 1;
  36. left: calc(33.333% - 5px); /* 初始位置设为 33.333% 宽度减去一半的分割线宽度 */
  37. }
  38. .handle {
  39. position: absolute;
  40. top: 50%;
  41. left: 50%;
  42. transform: translate(-50%, -50%);
  43. width: 20px;
  44. height: 20px;
  45. background-color: #666;
  46. border-radius: 50%;
  47. cursor: ew-resize;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container">
  53. <div class="left-column">
  54. <h2>Left Column</h2>
  55. <p>This is the left column.</p>
  56. </div>
  57. <div class="divider" id="divider">
  58. <span class="handle"></span>
  59. </div>
  60. <div class="right-column">
  61. <h2>Right Column</h2>
  62. <p>This is the right column.</p>
  63. </div>
  64. </div>
  65. <script>
  66. // scripts.js
  67. document.addEventListener('DOMContentLoaded', function() {
  68. const divider = document.getElementById('divider');
  69. let isDragging = false;
  70. let initialX = 0;
  71. let initialWidth = 0;
  72. const container = document.querySelector('.container');
  73. // 设置初始位置
  74. const initialLeftPosition = container.offsetWidth * (1/3) - divider.offsetWidth / 2;
  75. divider.style.left = `${initialLeftPosition}px`;
  76. document.querySelector('.left-column').style.width = `${initialLeftPosition + divider.offsetWidth}px`;
  77. document.querySelector('.right-column').style.width = `${container.offsetWidth - (initialLeftPosition + divider.offsetWidth)}px`;
  78. // 监听鼠标按下事件
  79. divider.addEventListener('mousedown', function(e) {
  80. isDragging = true;
  81. initialX = e.clientX;
  82. initialWidth = divider.offsetLeft;
  83. document.addEventListener('mousemove', drag);
  84. document.addEventListener('mouseup', stopDragging);
  85. });
  86. // 监听鼠标移动事件
  87. function drag(e) {
  88. if (!isDragging) return;
  89. const delta = e.clientX - initialX;
  90. const newLeftPosition = initialWidth + delta;
  91. const maxWidth = container.offsetWidth - divider.offsetWidth;
  92. const minWidth = 150; // 设定最小宽度
  93. const maxWidthLeft = maxWidth / 2; // 左侧最大宽度为一半的容器宽度
  94. const maxWidthRight = maxWidth / 2; // 右侧最大宽度为一半的容器宽度
  95. if (newLeftPosition >= minWidth && newLeftPosition <= maxWidthLeft) {
  96. divider.style.left = `${newLeftPosition}px`;
  97. document.querySelector('.left-column').style.width = `${newLeftPosition + divider.offsetWidth}px`;
  98. document.querySelector('.right-column').style.width = `${maxWidth - newLeftPosition}px`;
  99. }
  100. }
  101. // 监听鼠标抬起事件
  102. function stopDragging() {
  103. isDragging = false;
  104. document.removeEventListener('mousemove', drag);
  105. document.removeEventListener('mouseup', stopDragging);
  106. }
  107. });
  108. </script>
  109. </body>
  110. </html>

Vue2实现:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Vue 2拖动效果</title>
  7. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  8. <style>
  9. /* styles.css */
  10. body, html {
  11. margin: 0;
  12. padding: 0;
  13. height: 100%;
  14. font-family: Arial, sans-serif;
  15. }
  16. .container {
  17. display: flex;
  18. height: 100vh;
  19. position: relative;
  20. }
  21. .left-column, .right-column {
  22. flex-grow: 1;
  23. padding: 20px;
  24. box-sizing: border-box;
  25. }
  26. .left-column {
  27. background-color: #f0f0f0;
  28. }
  29. .right-column {
  30. background-color: #e0e0e0;
  31. }
  32. .divider {
  33. position: absolute;
  34. top: 0;
  35. bottom: 0;
  36. width: 10px;
  37. cursor: ew-resize;
  38. background-color: #ccc;
  39. z-index: 1;
  40. left: 0; /* 调整初始位置为 0 */
  41. }
  42. .handle {
  43. position: absolute;
  44. top: 50%;
  45. left: 50%;
  46. transform: translate(-50%, -50%);
  47. width: 20px;
  48. height: 20px;
  49. background-color: #666;
  50. border-radius: 50%;
  51. cursor: ew-resize;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div id="app">
  57. <div class="container">
  58. <div class="left-column" :style="{width: leftColumnWidth + 'px'}">
  59. <h2>Left Column</h2>
  60. <p>This is the left column.</p>
  61. </div>
  62. <div class="divider" ref="divider" @mousedown="startDragging">
  63. <span class="handle"></span>
  64. </div>
  65. <div class="right-column" :style="{width: rightColumnWidth + 'px'}">
  66. <h2>Right Column</h2>
  67. <p>This is the right column.</p>
  68. </div>
  69. </div>
  70. </div>
  71. <script>
  72. new Vue({
  73. el: '#app',
  74. data: {
  75. leftColumnWidth: 300,
  76. rightColumnWidth: 0,
  77. isDragging: false,
  78. initialX: 0,
  79. initialWidth: 0,
  80. containerWidth: 0,
  81. minWidth: 150, // 最小宽度
  82. maxWidth: 0, // 最大宽度
  83. },
  84. mounted() {
  85. this.containerWidth = document.querySelector('.container').clientWidth;
  86. this.maxWidth = Math.floor(this.containerWidth / 2) - 10; // 减去分割线的宽度
  87. this.rightColumnWidth = this.containerWidth - this.leftColumnWidth - 10;
  88. document.addEventListener('mousemove', this.drag);
  89. document.addEventListener('mouseup', this.stopDragging);
  90. // 设置初始位置
  91. const divider = this.$refs.divider;
  92. divider.style.left = `${this.leftColumnWidth}px`;
  93. },
  94. methods: {
  95. startDragging(e) {
  96. this.isDragging = true;
  97. this.initialX = e.clientX;
  98. this.initialWidth = this.leftColumnWidth;
  99. },
  100. drag(e) {
  101. if (!this.isDragging) return;
  102. const delta = e.clientX - this.initialX;
  103. const newLeftWidth = this.initialWidth + delta;
  104. if (newLeftWidth >= this.minWidth && newLeftWidth <= this.maxWidth) {
  105. this.leftColumnWidth = newLeftWidth;
  106. this.rightColumnWidth = this.containerWidth - newLeftWidth - 10;
  107. // 更新 divider 的位置
  108. const divider = this.$refs.divider;
  109. divider.style.left = `${this.leftColumnWidth}px`;
  110. }
  111. },
  112. stopDragging() {
  113. this.isDragging = false;
  114. }
  115. }
  116. });
  117. </script>
  118. </body>
  119. </html>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小桥流水78/article/detail/924695
推荐阅读
相关标签
  

闽ICP备14008679号