setting resetInitialPos does not work // or I don't understand

[Zeitvertreib]

I want a thing to return to its initial Position, as long as it has not been dragged out of a certain boundry/ threshold. ..but first things first, I want to have it always return, so I do this in my .vue:

  ...
  <div v-draggable="draggableValue">
    test
  </div>
  ...
  import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives: {
            Draggable,
        },
        data() {
            return {
                draggableValue: {
                    resetInitialPos: true
                };
            }
        }

but that doesn't do a thing.

What am I missing here or is it a bug?

regards

[IsraelZablianov]

You miss understood, you should use toggle resetInitialPos when needed, meaning: after some action you should toggle resetInitialPos to true and than back again to false.

e.g.

    onReset() {
        this.draggableWithResetPosition.resetInitialPos = true;
        setTimeout(() => {
            this.draggableWithResetPosition.resetInitialPos = false;
        }, 0);
    }

please look at the draggable demo app for more samples regarding the draggable directive.

for stopping the draggable from moving you have the property stopDragging

[Zeitvertreib]

yes yes, awesome, and your repo does save me a lot of work, so I am very thankful! But resetInitialPos is listed in the readme under: "The object passed to the directive is called the directive value. For example in v-draggable="draggableValue" draggableValue can be an object containing the folowing fields: ..."

So I thought I can use it like the other fields.

[IsraelZablianov]

You are using it like other fields, but you are right, it might be a bit confusing because once you set the resetInitialPos the draggable object is reset to it's initial position immediately and the tricky part is, if you won't toggle the the value again, in the next directive value update (say you update the draggable handler or whatever) the draggable object will be reseted again. The conclusion here is that the resetInitialPos is valid and will take place immediately and only one time, when it's value set to true. Hope it make sense to you, if not U may suggest other/additional behaviour that U would like to see.

Israel

[Zeitvertreib]

Ok, well, when I was writing 'but that doesn't do a thing' in my initial post I meant it does not reset to the initial position. But if I understand your reply correct it should? (With the impression of 'nothing happens' because it is reset immediately)

When I modify my example code to like this:

  ...
  <div v-draggable="draggableValue">
    {{ draggableValue }}
  </div>
  ...
  import { Draggable } from 'draggable-vue-directive'
  ...
  export default {
        directives: {
            Draggable,
        },
        data() {
            return {
                draggableValue: {
                    resetInitialPos: true
                };
            }
        }

it then creates a string { "resetInitialPos": true } in the output html which is different from when I set the onPositionChange: this.onPosChanged field like its in the readme (no such string is created in that case).

Also if I set both fields set:

  ...
        data() {
            return {
                draggableValue: {
                    resetInitialPos: true,
                    onPositionChange: this.onPosChanged
                };
            }
        },
        methods: {
            onPosChanged: function(positionDiff, absolutePosition, event) {
                console.log("left corner", absolutePosition.left);
                console.log("top corner", absolutePosition.top);
            }
        }
   ...

Then I get a TypeError: absolutePosition is undefined. (If I comment that resetInitialPos: true line it works flawlessly and the string in the html is {})

However, I think that is the way the readme suggests, or it's my poor understanding of what 'field' means, or it's a bug :)

[IsraelZablianov]

In your case you won't see any change because as I said before the reset initial position should be triggered later in the app life time. It make no sense to set resetInitialPos: true in the beginning because it is already in it's initial position, so if you set resetInitialPos: true in the beginning before the initialPos changed you did nothing.

Did you looked at the demo app I sent you before? please look, there is a working sample.