drewjbartlett / vue-flickity

A Vue Slider / Carousel Component for Flickity.js
http://drewjbartlett.com/demos/vue-flickity/
374 stars 55 forks source link

Router links triggers during slides draggin #46

Open mcake8 opened 5 years ago

mcake8 commented 5 years ago

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

mcake8 commented 5 years ago

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 commented 5 years ago

@mcake8 Not work for me.

ArashKenji73 commented 4 years ago

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

luksak commented 2 years ago

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