Interact.js: Document how to correctly restore the original position

[aoloe]

The FAQ says:

There's no direct API to revert a dragged element to it's position before the drag. To do this, you must store the position at dragstart and change the element's style so that it returns to the start position on dragend. You can use CSS transitions to animate change in position.

But it does not say how to correctly store and restore the coordinates.

Several people have asked the question.
There is one lengthy thread with fails and succeeding approaches, but it's hard to sort out what should work with the current code.

Since the FAQ recognizes that it's a frequent question, it would be nice to have a clear answer to it...

[aoloe]

After much reading and fiddling, this is what I came up with.
Seems to work for me.

Not sure at all if this is a good solution or not, but it might help starting the discussion.

https://jsfiddle.net/8x6ewk0g/2/

Html:

```.html

• A
• Bb
• Ccc
• Dddd

Js:

```.js
var drag_pos = {x: 0, y: 0}

function dragging(e) {
  drag_pos.x += e.dx;
  drag_pos.y += e.dy;

  e.target.style.transform = 'translate(' + drag_pos.x + 'px, ' + drag_pos.y + 'px)';
}

function dragged(e) {
  drag_pos.x = 0;
  drag_pos.y = 0;
  e.target.style.transform = 'translate(0px, 0px)';
}

interact('.draggable')
  .draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: 'parent',
      endOnly: true
    })
  ],
  autoScroll: true,
  listeners: {
    end: dragged,
    move: dragging,
  }
})

[sualko]

For me the explanation is clear and a library can't provide an example for everything.

Just use start, to store the original position, and end, to restore the original position, listener.

If you want to have this in the documentation, create a pull request for https://github.com/taye/interact.js/tree/master/docs

Happy coding :tada:

[aoloe]

i finally decided not to use interact, so i won't be going deeper into this.

but:

• this topic is in the FAQ which makes it a frequent asked question.
• all entries in the FAQ have a code snippet attached, except this.
• the linked Github issue seems to be the authorative source for this topic, but it's so lengthy that i could not figure out that start and end is what i should be using.

thanks for caring and have fun.

p.s.: feel free to close this issue if you think that nobody will provide a solution.

[sualko]

Just want to clarify that I'm not associated to this project. It's just my opinion as developer.

[iursevla]

@aoloe what did you decide to use?

[aoloe]

after having struggled with the vue.js integration i went back to the first solution i had tried: Vue.Draggable with Sortable.js (and with what i've learned with interact and sortable.js i easily got it to work).

[taye]

Sorry that the docs aren't as helpful as they could be—I think it's hard to find the right balance between fixing bugs, developing new features, improving existing ones, and making the library easier to use.

I had hoped that the use case of dragging items in re-arrangeable lists would have been solved by a consumer of the library and then shared as open source while I continued trying to make interact.js really good at the smallish scope it was designed to solve, but as far as I'm aware there are no popular solutions.

This particular use case wasn't something I initially wanted to focus on, but I decided a while ago that I'd start working on it and many others as part of a paid-for set of packages. Ideally, if that works out, I'd have a bit more time and motivation to work on the open source library. If you're interested, you can find some more info at https://interactjs.io/pro and sign up to the newsletter to get some infrequent updates on what my plans are.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.