JIYIK CN >

With the popularity of mobile applications, floating window sliding effect has become an increasingly common interactive method in mobile design. In Vue, we can use some plug-ins or write code ourselves to achieve this effect.

1. Use third-party plug-ins

1. view-draggable

vue-draggable is a drag component library based on Vue.js, which provides some common drag effects, including drag-sort, drag-copy, drag-delete, etc. We can use it to implement the drag effect of the floating window on the mobile terminal.

First, we need to import the vue-draggable dependency:

npm install vuedraggable --save

Then, in the component that needs to use the drag effect, import and register vue-draggable:

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
        { id: 4, name: 'item 4' },
        { id: 5, name: 'item 5' }
      ]
    }
  }
}

Next, use the draggable component in the template to show the drag effect:

<template>
  <draggable v-model="items">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </draggable>
</template>

In this way, we can realize the drag effect of the floating window on the mobile terminal.

2. vue-touch-ripple

vue-touch-ripple is a touch ripple effect plugin based on Vue.js, which can add touch ripple effect to any element. We can use it to achieve the sliding effect of mobile floating window.

First, we need to import the vue-touch-ripple dependency:

npm install vue-touch-ripple --save

Then, in the component that needs to use the touch ripple effect, import and register vue-touch-ripple:

import VueTouchRipple from 'vue-touch-ripple'

export default {
  directives: {
    'ripple': VueTouchRipple.directive
  }
}

Next, use the ripple directive in the template to display the touch ripple effect:

<template>
  <div v-ripple>Content</div>
</template>

In this way, we can achieve the sliding effect of the floating window on the mobile terminal.

2. Write your own code

If we don’t want to use third-party plug-ins, we can also write our own code to implement the drag and slide effects of mobile floating windows.

1. Realize the drag effect of floating window

First, we need to add touchstart, touchmove and touchend events to the floating window component's template:

<template>
  <div class="float-window"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
  >
    Content
  </div>
</template>

Next, define the onTouchStart, onTouchMove and onTouchEnd methods in the component's script:

export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      left: 0,
      top: 0
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.left
      this.offsetY = this.top
    },
    onTouchMove(e) {
      const x = e.touches[0].clientX - this.startX + this.offsetX
      const y = e.touches[0].clientY - this.startY + this.offsetY
      const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth
      const maxY = window.innerHeight - this.$refs.floatWindow.offsetHeight
      this.left = x < 0 ? 0 : (x > maxX ? maxX : x)
      this.top = y < 0 ? 0 : (y > maxY ? maxY : y)
    },
    onTouchEnd(e) {
      // do nothing
    }
  }
}

In the onTouchStart method, we record the position of the touch start point and the offset of the floating window. In the onTouchMove method, we calculate the new position of the floating window based on the touch movement distance and the offset of the floating window, and limit the movement range of the floating window. In the onTouchEnd method, we do not do anything for now.

Finally, define the position of the floating window in the component's style:

<style scoped>
.float-window {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
}
</style>

In this way, we can realize the drag effect of the floating window on the mobile terminal.

2. Realize the sliding effect of floating window

Next, we need to add touchstart, touchmove and touchend events to the floating window component's template:

<template>
  <div class="float-window"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
  >
    Content
  </div>
</template>

Next, define the onTouchStart, onTouchMove and onTouchEnd methods in the component's script:

export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      left: 0,
      top: 0,
      isScrolling: false
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.left
      this.offsetY = this.top
      this.isScrolling = false
    },
    onTouchMove(e) {
      const x = e.touches[0].clientX - this.startX + this.offsetX
      const y = e.touches[0].clientY - this.startY + this.offsetY
      const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth
      const maxY = window.innerHeight - this.$refs.floatWindow.offsetHeight
      this.left = x < 0 ? 0 : (x > maxX ? maxX : x)
      this.top = y < 0 ? 0 : (y > maxY ? maxY : y)
      if (Math.abs(e.touches[0].clientX - this.startX) > 5 || Math.abs(e.touches[0].clientY - this.startY) > 5) {
        this.isScrolling = true
      }
    },
    onTouchEnd(e) {
      if (!this.isScrolling) {
        if (e.changedTouches[0].clientX < window.innerWidth / 2) {
          this.left = 0
        } else {
          this.left = window.innerWidth - this.$refs.floatWindow.offsetWidth
        }
      }
    }
  }
}

In the onTouchStart method, we record the position of the touch start point and the offset of the floating window, and set the isScrolling flag to false. In the onTouchMove method, we calculate the new position of the floating window based on the touch movement distance and the offset of the floating window, and limit the movement range of the floating window. At the same time, if the touch movement distance exceeds 5px, we set the isScrolling flag to true. In the onTouchEnd method, if the isScrolling flag is false, it means that the touch is sliding rather than dragging, and we set the position of the floating window according to the touch end position.

Finally, define the position of the floating window in the component's style:

<style scoped>
.float-window {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  transition: left 0.3s ease-out;
}
</style>

In this way, we can achieve the sliding effect of the floating window on the mobile terminal.

Example

Suppose we need to implement a floating window component on the mobile terminal that can be dragged and slid. We can first write a FloatWindow component:

<template>
  <div class="float-window"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
       ref="floatWindow"
       :style="{left: left + 'px', top: top + 'px'}"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      left: 0,
      top: 0,
      isScrolling: false
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.left
      this.offsetY = this.top
      this.isScrolling = false
    },
    onTouchMove(e) {
      const x = e.touches[0].clientX - this.startX + this.offsetX
      const y = e.touches[0].clientY - this.startY + this.offsetY
      const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth
      const maxY = window.innerHeight - this.$refs.floatWindow.offsetHeight
      this.left = x < 0 ? 0 : (x > maxX ? maxX : x)
      this.top = y < 0 ? 0 : (y > maxY ? maxY : y)
      if (Math.abs(e.touches[0].clientX - this.startX) > 5 || Math.abs(e.touches[0].clientY - this.startY) > 5) {
        this.isScrolling = true
      }
    },
    onTouchEnd(e) {
      if (!this.isScrolling) {
        if (e.changedTouches[0].clientX < window.innerWidth / 2) {
          this.left = 0
        } else {
          this.left = window.innerWidth - this.$refs.floatWindow.offsetWidth
        }
      }
    }
  }
}
</script>

<style scoped>
.float-window {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  transition: left 0.3s ease-out;
}
</style>

We can then import the FloatWindow component in the parent component and use it:

<template>
  <div>
    <float-window>
      Floating window content
    </float-window>
  </div>
</template>

<script>
import FloatWindow from './FloatWindow.vue'

export default {
  components: {
    FloatWindow
  }
}
</script>

In this way, we can implement a floating window component that can be dragged and slid on the mobile terminal.