oboard

oboard

https://oboard.eu.org/
github
email
tg_channel
medium
twitter
bilibili
steam_profiles
follow

50 lines of code to implement a draggable adjustable split layout using Vue

Hold the divider to adjust the ratio

Implementation is not difficult, but other articles online have really complicated simple things.
The method I'm teaching you today is super simple!!!! Only 50 lines of code!!

When the mouse is pressed at the divider position,
the triggerDragging variable becomes true.

At this point, in the mousemove of split-pane-wrapper, check triggerDragging.
If it is true, change leftOffset, and the width of pane-left will change accordingly.

The width of pane-trigger-con is fixed,
while pane-right uses a flexible layout with flex: 1;
to fill the remaining space, which is suitable for the content display part of the webpage.

<template>
  <div class="split-pane-wrapper" @mousemove="mouseMoveTrigger">
    <div class="pane-left" :style="{ width: leftOffset + 'px' }"></div>
    <div class="pane-trigger-con" @mousedown="mouseDownTrigger"></div>
    <div class="pane-right"></div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      leftOffset: 300,
      triggerDragging: false,
    };
  },
  methods: {
    mouseMoveTrigger(event) {
      if (!event.which) this.triggerDragging = false;
      if (this.triggerDragging) {
        this.leftOffset = event.clientX;
      }
    },
    mouseDownTrigger(event) {
      this.triggerDragging = true;
    },
  },
};
</script>
<style scoped>
.split-pane-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.pane-left {
  background: brown;
}
.pane-right {
  flex: 1;
  background: chartreuse;
}
.pane-trigger-con {
  width: 8px;
  background: red;
  cursor: ew-resize;
}
</style>

2022-8-24
Remember to follow⬇️

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.