Open mcake8 opened 5 years ago
I had the same issue. Didn't solved it on a very clean way but you can use the drag event to add a class when dragging. Then simply put pointer-events: none on that class.
flickity.on( 'dragMove', function( event, pointer, moveVector ) { $($projectItem).addClass('nopointer'); }); flickity.on( 'dragEnd', function( event, pointer ) { $($projectItem).removeClass('nopointer'); });
the class :
.nopointer { pointer-events: none; }
The best way that i find is like this
mounted() { setTimeout(() => { this.$refs.flickity.on("staticClick", event => { this.$router.push( "/projects/" + event.target.dataset.id ); }); }, 100); },
im attaching event on mounted hook and get link's href from dataset of an element that had been clicked
@mcake8 Not work for me.
i have same problem please fix this or give us onDrag event
Here is a more generic version of @eertmanhidde 's approach:
mounted() {
setTimeout(() => {
const cells = this.$refs.flickity.getCellElements()
this.$refs.flickity.on('dragMove', function (event, pointer, moveVector) {
cells.forEach((element) => {
element.classList.add('nopointer')
})
})
this.$refs.flickity.on('dragEnd', function (event, pointer) {
cells.forEach((element) => {
element.classList.remove('nopointer')
})
})
}, 100)
}
That works perfectly for me.
You'll still need this style:
.nopointer { pointer-events: none; }
I have a slider with a router link inside each slide, and i can't swipe or drag slides on desktop without redirecting to another route. I guess it's because router links click can't be prevented.