Interact.js: How to update draggable restrict elementRect after resizing.

[cristiantx]

I have an element with two interactable behaviors draggable and resizable.

Draggable works perfect on init, but when I apply some resize action, I need to update the elementRect for the restrict option and I wasn't able to do it. Is there a way to update it ?

I've tried something like this, without success

var interact = interact( el )
    .draggable({
        restrict: {
            restriction: calculateRestriction, // Function that calculates the restriction coord
            elementRect: getElementRect() // Function that returns the expected interact.js object.
        }
    })
    .resizable({
        preserveAspectRatio: true,
        edges: { left: true, right: true, bottom: true, top: true }
    })
    .on('resizeend', onResizeEnd );

function onResizeEnd() {
    interact.set({
        restrict: {
            restriction: calculateRestriction, // Function that calculates the restriction coord
            elementRect: getElementRect() // Function that returns the expected interact.js object.
        }
    });
};

It's not exactly this code, simplified so it's easier to get the idea. interact.set() seems to break the restriction and I can't move the draggable anymore.

This issue is pretty similar to this https://github.com/taye/interact.js/issues/159 but I need to restrict it live instead of onEnd

[taye]

interactable.set() resets all the options like new. Instead you need to call the interactable.draggable method with the like:

function onResizeEnd(event) {
  event.interactable.draggable({
    restrict: { ... }
  });
}

Sorry for the late reply.