Router links triggers during slides draggin

[mcake8]

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.

[eertmanhidde]

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; }

[mcake8]

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

[aliqasemzadeh]

@mcake8 Not work for me.

[ArashKenji73]

i have same problem please fix this or give us onDrag event

[luksak]

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; }