Possible to manually update x, y, w and h properties?

This issue has been tracked since 2018-10-13.

I want to set the coordinates and size of the drag-item manually using javascript, besides dragging/resizing.

The x,y, w and h properties seem to be only default values.
Is there any way to update the drag-item with new values and display it on its new position?

TitanFighter wrote this answer on 2018-10-14

@Dylan190774 show your code or use :x="yourX" :y="yourY".

Template

<VueDragResize :x="yourX", :y="yourY">
  <h3>Hello World!</h3>
   <p>{{ top }} х {{ left }} </p>
   <p>{{ width }} х {{ height }}</p>
</VueDragResize>

Script

data() {
  return {
    yourX: 150,
    yourY: 150
 }
}
Dylan190774 wrote this answer on 2018-10-14

It's a Scrabble like word-game.
I have an array letters that hold the position, size and letter.

      <VueDragResize
        v-for="(letter,letterindex) in letters"
        v-bind:key="'letter_'+letterindex"
        :isDraggable="true"
        :isActive="true"
        :isResizable="false"

        :x="letter.x"
        :y="letter.y"
        :w="letter.width"
        :h="letter.height"
        :minw="letter.width"
        :minh="letter.height"

        @clicked="onActivated(letterindex)"
        @dragging="(rect)=>onDragging(letterindex, rect)"
      >
        <div
          :class="'letter letter_'+letterindex"
          @touchstart="onTouchstart(letterindex)"
          @touchend="onTouchend(letterindex)"
        >
          {{ letter.letter }}
        </div>
      </VueDragResize>

In onTouchend I decide if the letter is placed right on the board or that it should go back to the rack. I do the animation with jQuery. This works, but when I try to drag the same letter again, the x and y are still in the same place where I stopped dragging. This should be updated to the new position it got after animating to the rack.

Hope you understand :)

TitanFighter wrote this answer on 2018-10-14

Here is the template for the demo. Could you please add your code to show the problem?

Dylan190774 wrote this answer on 2018-10-14

I made a simplified example

The tile can be dragged, and when you click the button it is moved to a new location. But this only works once.
Is there some way to reset it, so I can keep on moving it with Javascript as well as being able to drag it ?

EDIT: it seems to work when I add the onDragging event and update tilex and tiley.
I think my app wasn't working because of the data being an array, and you can't just do :

        that.letters[letterindex].x = rect.left;
        that.letters[letterindex].y = rect.top;

Guess I'll have to use $set to update the array...

TitanFighter wrote this answer on 2018-10-14

Hi @Dylan190774
From what I understand taking into account your 2 posts, here is the basic fixes.

Regarding

In onTouchend I decide...

you did not provide any if statements, so I can not comment it.

If you need any additional help, add additional code where needed and write step by step your use case.

Dylan190774 wrote this answer on 2018-10-14

Thanks for taking the trouble to help me with this.

Eventually of course I don't want to use the buttons. The return of the tile to the rack should happen when the tile is placed wrong, so this should be triggered when the dragging stops (or touchend, but that doesn't seem to work well either).

Also , in touch mode (Chrome Toggle device toolbar) the buttons don't seem to work. I'm wondering what is the cause of that.

EDIT:
When I removed the touchend event on the div inside the tile, somehow the buttons do work in touch mode too! See example
I'm suspecting this has something to do with event propagation / bubbling down touchend event. But now I still can't capture the moment of releasing the tile in touch mode :)

TitanFighter wrote this answer on 2018-10-15

I don't want to use the buttons. The return of the tile to the rack should happen when the tile is placed wrong, so this should be triggered when the dragging stops (or touchend, but that doesn't seem to work well either).

I can help you to fix this, but you need to provide an appropriate code (function which checks wrong/right place of tile and in case of wrong place return tile to the rack).

Dylan190774 wrote this answer on 2018-10-15

Could you please respond to my other question about the dragstop event in touch-mode (#37) ? If I could catch the moment the dragging stops in touch mode, I think I can get it working the way I want. Somehow if I use a touchend-event to do this, the tile is not reactive anymore.

rsvidevince wrote this answer on 2022-02-24

Im trying to update the width and height with a pinch movement, resizing the variables in touchmove event. It only refreshes the size on touchend though... Any ideas?

More Details About Repo
Owner Name kirillmurashov
Repo Name vue-drag-resize
Full Name kirillmurashov/vue-drag-resize
Language JavaScript
Created Date 2018-04-26
Updated Date 2022-11-25
Star Count 1764
Watcher Count 24
Fork Count 291
Issue Count 89

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date