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

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!