Resize while dragging ?

[Dylan190774]

I'm trying to create some kind of effect, where I have multiple Scrabble-tiles and the tile that is dragged needs to be twice the size. After dropping the tile, it should go to normal size again.

I have defined one vue-draggable-resizable tag with a v-for. This way multiple tiles are created, and I can drag them all. The dragging of the tiles works fine, but I can't find out where to put the resize-logic.

        <vue-draggable-resizable
          v-for="(letter,letterindex) in letters"
          v-bind:key="letterindex"
          :w="35"
          :h="35"
          :x="18 + 40 * letterindex"
          :y="4"
          :active="false"
          :draggable="true"
          :resizable="false"
          @activated="()=>onActivated(letterindex)"
          @deactivated="()=>onDeactivated(letterindex)"
          @dragging="(left, top, width, height)=>onDragging(letterindex, left, top, width, height)"
          @dragstop="(left, top)=>onDragstop(letterindex, left, top)"
        >
            <div
              :class="'letter letter_'+letterindex"
            >
              {{ letter.letter }}
            </div>
        </vue-draggable-resizable>

The activated event only gets fired once for each tile, when the tile is clicked. To achieve this I had to use :active="false" . The dragstop event only gets fired when another tile is dragged, so not when releasing the mouse button. The deactivated event only fires when I click outside any tile.

Any ideas how to achieve the effect I'm looking for ?

[mauricius]

I don't know if I understand correctly your problem, but if you want to resize each tile dynamically from outside you need to use version 2 of the component (on the dev branch), because version 1 does not support props watching.