How to handle touchEvents with Vue?

user_14034634 0
Viewed 1322

Is it possible to handle touchEvents with Vue3 without external library?

My need is that the element can be moved (drag and drop in another place) by touch. The elements themselves are rendered using v-for. I implemented mouse control without problems, but with touch I got stuck for a day!

I've found only one library for that: https://github.com/robinrodricks/vue3-touch-events

But I really can't understand where I have to put UDM module and how to execute installation steps like that: "You need to include the UMD script of this plugin and you do not need to register this plugin with vue.js."

I can't believe that such popular framework as Vue3 haven't native touch handlers, so I want to ask an advice.

vuejs3 vue.js touch
1 Answers

Touch events are supported natively in Vue, in the same way that they are in JavaScript. But the dragging or swiping functionality, you will need to either build yourself, or use a third-party plugin (like hammer.js).

You can use touch events in a similar way to mouse up/ down. For example:

<MyComponent
  @mousedown="startDrag(item)"
  @mouseup="endDrag(item)"
  @mousemove="startDrag(item)"
  @touchstart="startDrag(item)"
  @touchend="endDrag(item)"
  @touchmove="endDrag(item)"        
/>
user_9790520
Related