Interact.js: Two questions about restirct

[ttback]

I am trying to restrict an element within the container (the boundary of inside div shouldn't go out or cross the container div's bounds) and not sure what the config would look like.

On top of that, I don't know if snap() triggers any events. I tried .snap.on('end') but that didn't trigger anything. I need to update something on snap so.

[taye]

I am trying to restrict an element within the container (the boundary of inside div shouldn't go out or cross the container div's bounds) and not sure what the config would look like.

https://github.com/taye/interact.js/issues/47#issuecomment-49625438 shows how to do better restrictions.

On top of that, I don't know if snap() triggers any events. I tried .snap.on('end') but that didn't trigger anything. I need to update something on snap so.

At the moment, snapping doesn't trigger any events. However, if snapping is enabled, drag event coordinates will be modified to the snap coordinates if a snap point is in range. The drag events would also have a snap property which is an object with some snap info - https://github.com/taye/interact.js/blob/v1.0.20/interact.js#L1300.

[ttback]

i see, thanks for the quick reply. I just found out about the usage of path and it looks great. I am trying to have elements only move horizontally / vertically, instead of freeway. It is working if it is just x: number, range: infinity, but I am having trouble to make paths [{horizontal path}, {vertical path}] work...would I need to update the path on 'dragend'?

[taye]

I think a better way to do that would be to check the dominant axis of the first "dragmove" event and set some flag to indicate the axis that drag can be allowed in. Then you can ignore the change in the other axis.

For example:

var axis = '';

interact('*')
  .on('dragmove', function (event) {
    if (!axis) {
      axis = (event.dx >= event.dy) ? 'x' : 'y';
    }

    if (axis === 'x') {
      // use event.dx
    }
    else {
      // otherwise, use event.dy;
    }
  })
  .on('dragend', function (event) {
    // clear the axis
    axis = '';
  });

[ttback]

I tried your restrict code, think that still only gets the edge of inside element touching the container div. I will see if I can tweak it to make it go inside the box. Thanks for the quick reply tho

[taye]

You're welcome. Good luck!

[ttback]

sorry to bother here again, but does resize has anything like resize-start and resize-end events?

[ttback]

nvm, found it in source

[SunboX]

@ttback And the answer is how? Came across here for searching for the same thing. Luckily, you found it. 😢

Found it in the docs: http://interactjs.io/docs/ ... "resizeend" event