Dragging with hammer.js works on browser on pc. It fires continuously but when it comes to iPad, there is little problem. It fires after dragging/swiping finger stops on screen
template
<v-sheet v-pan="onPan">
<div class="vista__img" ref="image" :style="{ backgroundImage: 'url(' + vista.image + ')' }"></div>
</v-sheet>
directives
directives:{
pan: {
bind: function(el, binding) {
if (typeof binding.value === "function") {
const mc = new Hammer(el);
mc.get("pan").set({ direction: Hammer.DIRECTION_ALL });
mc.on("pan", binding.value);
}
}
},
methods && computed
methods:{
onPan(e) {
const dragOffset = -100 / this.itemWidth * e.deltaX / this.overflowRatio;
const transform = this.currentOffset + dragOffset;
this.$refs.image.style.setProperty("--x", transform);
if (e.isFinal) {
this.currentOffset = transform;
const maxScroll = 100 - this.overflowRatio * 100;
let finalOffset = this.currentOffset;
}
},
}
computed: {
overflowRatio() {
return this.$refs.image.scrollWidth / this.$refs.image.offsetWidth;
},
itemWidth() {
return this.$refs.image.scrollWidth;
},
},
Any idea about handling drag continuously on iPad too?
from hammer.js dragging not start 'till finger stop on ipad screen
No comments:
Post a Comment