Router links triggers during slides draggin about vue-flickity HOT 5 OPEN

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

from vue-flickity.

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

from vue-flickity.

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

from vue-flickity.

@mcake8
Not work for me.

from vue-flickity.

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

from vue-flickity.