Resizing is not working with touch devices

[devjabeer]

trafficstars

I tried provided demo on touch devices and I could not be able to resize the panes using fingers/touch drag. Touch support or fix would be appreciated. Thanks

[joohong89]

Ran into this issue recently Hope this would help anyone who is still using this.

Since touch events are not supported, the event listeners for touchstart, touchend and touchmove can be added to trigger the mousedown, mouseup and mousemove of vue-multipane directly.

Example of what could be done.

Add ref to multipane and multipane-resizer

<multipane layout="vertical" ref="multipane"> ... <multipane-resizer ref="resizer"> ...

Add the "mapper" methods

    multipaneTouchMove (e) {
      const touch = e.touches[0]
      const mouseEvent = new MouseEvent('mousemove', {
        bubbles: true,
        cancelable: true,
        clientX: touch.clientX,
        clientY: touch.clientY,
        button: 0 
      })
      this.$refs.multipane.$el.dispatchEvent(mouseEvent)
    },
    multipaneTouchStart (e) {
      const touch = e.touches[0]
      this.$refs.multipane.onMouseDown({
        target: touch.target,
        pageX: touch.clientX,
        pageY: touch.clientY
      })
    },
    multipaneTouchEnd (e) {
      const mouseEvent = new MouseEvent('mouseup', {
        bubbles: true,
        cancelable: true,
        button: 0
      })
      this.$refs.multipane.$el.dispatchEvent(mouseEvent)
    },

Register touchstart, touchend and touchmove listeners

      this.$refs.resizer.$el.addEventListener('touchmove', this.multipaneTouchMove)
      this.$refs.resizer.$el.addEventListener('touchstart', this.multipaneTouchStart)
      this.$refs.resizer.$el.addEventListener('touchend', this.multipaneTouchEnd)

Note: remember to remove these listener when component is destroyed.