113
rated 0 times
[
115]
[
2]
/ answers: 1 / hits: 16466
/ 5 Years ago, fri, august 30, 2019, 12:00:00
I'm trying to add a touch and drag functionnality in my app with no success so far.
Here's the idea:
- The user touch an element to activate it
- He moves his finger accross the element's siblings to activate them also
- if he removes his finger, all the elements are deactivated
I can make it work flawlessly with mouse events but the touch events seems to work differently. I assume it's because once the touchstart is triggered, the other touch events are bound to the same initial target. What grinds my gear here, is that the touchend can be bound to a parent elements and works...
Here's an example code. You can see it works as expected with mouse event, but if you emulate the touch, it's not working anymore.
Vue.component('to-press', {
template: `<span class=col-3 p-2 bg-light border :class={ 'bg-dark': isActive } @mousedown=emitPanMode() @touchstart=emitPanMode() @mousemove=setActive() @touchmove=setActive()> </span>`,
props: ['isPan'],
data() {
return {
isActive: false,
}
},
methods: {
emitPanMode() {
this.isActive = true;
this.$emit('on-pan');
},
setActive() {
this.isActive = this.isPan;
}
},
watch: {
isPan(val) {
if (!val) {
this.isActive = false;
}
}
}
})
const app = new Vue({
el: #app,
data() {
return {
panMode: false,
};
},
methods: {
togglePanMode(val) {
this.panMode = val;
}
}
})* {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js></script>
<link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css integrity=sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T crossorigin=anonymous>
<div id=app class=container py-4 @mouseup=togglePanMode(false) @touchend=togglePanMode(false)>
<div class=row>
<to-press v-for=i of 12 :key=i @on-pan=togglePanMode(true) :is-pan=panMode />
</div>
<p>Click/touch a rectangle, hold and drag accross</p>
</div>Any insight on how to handle the touch the same way as with the mouse ? Anything I'm missing ?
More From » vue.js
