How to use touch directive along multiple elements?

[dhax]

Hi everyone,

I have a simple 4x4 board game and am trying to figure out how to select multiple adjacent fields with a touch-and-swipe like motion. I checked the different touch directives available but can’t figure out how to do this, and even with the available position, offset, distance and delta information available this seems unnecessary complicated if feasible at all. This is my current code:

<q-card class="non-selectable">
    <q-card-section class="q-pa-md">
      <div
        v-for="i in 4"
        :key="i"
        class="row justify-center"
      >
        <div
          v-for="j in 4"
          :key="i.toString() + j.toString()"
          v-touch-pan="setMove"  // also how to setMove(i, j) here?
        >
        </div>
      </div>
    </q-card-section>
</q-card

I guess I am looking for an equivalent to @mouseover but for touch events which allows me to call the setMove function while moving around adjacent fields. I would like the touch event to stop when leaving one field and start again when touching an adjacent field, so that I can call the setMove action with i and j as parameters.

Any ideas or tips how to achieve something like this?

Thanks a lot and have a nice day!

[metalsadman]

Would be helpful if you provide a codepen. As for your handler you can use an arrow function to pass other params ie. v-touch-pan="evt => { setMove(evt, i, j) }". I guess you should check the examples in the docs, im guessing you need some modifiers also stopping other events like what you stated above. Gl

[dhax]

Thanks for having a look. Here’s the codepen with the minimum functionality, so far only the first field gets selected. I tried to wrap the ‘inner’ selectable field with an outer field containing @touchstart.stop in hope it would trigger when going from one field to another one but doesn’t work the way I tried.

https://codepen.io/dhax/pen/abvxGRq?editors=1111

[metalsadman]

@dhax Touchpan passes the event, so i think check that object and see which element it has current focus on, once it travels to other div you’ll do some checking if that element has selected class or not then add or remove the said class.