How to use interactjs - 10 common examples

componentDidMount() {
      if (!this.node) {
        console.error(' you should apply getRef props in the dom element') // eslint-disable-line
        return
      }
      this.interactable = interact(this.node)
      options.forEach((option) => {
        if (option in this.props) {
          this.interactable[option](this.props[option])
        }
      })
      events.forEach((event) => {
        const handler = this.props[`on${event}`]
        if (typeof handler === 'function') {
          this.interactable
            .on(event.toLowerCase(), handler)
        }
      })
    }
    componentWillUnmount() {

export function makeResizable($top: JQuery): void {
  // We listen to resizestart and resizeend to deal with the following scenario:
  // the user starts resizing the modal, it goes beyond the limits of how big it
  // can be resized, the mouse pointer moves outside the modal window and the
  // user releases the button when the pointer is outside. Without the use of
  // ignoreBackdropClick, this causes the modal to close.
  const content = $top.find(".modal-content")[0];
  const body = $top.find(".modal-body")[0];
  interact(content)
    .resizable({})
    .on("resizestart", () => {
      const modal = $top.data("bs.modal");
      if (modal == null) {
        return; // Deal with edge cases.
      }
      // Prevent modal closure.
      modal.ignoreBackdropClick = true;
    })
    .on("resizeend", () => {
      // We use a setTimeout otherwise we turn ignoreBackdropClick too soon.
      setTimeout(() => {
        const modal = $top.data("bs.modal");
        if (modal == null) {
          return; // Deal with edge cases.
        }

{ width: SNAP_SIZE, height: SNAP_SIZE, range: SNAP_SIZE },
            ] };
        }

        if (prevProps.pluginToolbars[this.props.id] && (toolbar.showTextEditor !== prevProps.pluginToolbars[this.props.id].showTextEditor) && box.draggable) {
            interact(node).draggable({ enabled: !toolbar.showTextEditor, snap: snapD });
        } else {
            interact(node).draggable({ snap: snapD });
        }

        // if (box.resizable) {
        interact(node).resizable({ preserveAspectRatio: this.checkAspectRatioValue(), snap: snap, snapSize: snapSize });
        // }

        if ((box.level > this.props.boxLevelSelected) && this.props.boxLevelSelected !== -1) {
            interact(node).draggable({ enabled: false });
        }

    }

componentDidMount() {
        let toolbar = this.props.pluginToolbars[this.props.id];
        let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
        let config = apiPlugin.getConfig();
        let box = this.props.boxes[this.props.id];
        let container = box.container;
        let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
        let leftO = offsetEl.left || 0;
        let topO = offsetEl.top || 0;
        offsetEl;
        let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
        let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });

        let targets = this.props.grid ? [gridTarget] : [];
        let dragTargets = this.props.grid ? [dragTarget] : [];
        Ediphy.Plugins.get(config.name).getConfig();
        Ediphy.Plugins.get(config.name).afterRender(this.refs.content, toolbar.state);
        let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
        let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
        let canvas = this.props.containedViewSelected === 0 ?
            document.getElementById('canvas') :
            document.getElementById('containedCanvas');
        interact.dynamicDrop(true);
        interact(ReactDOM.findDOMNode(this))
            .draggable({
                snap: {
                    targets: dragTargets,
                    relativePoints: [{ x: 0, y: 0 }],

componentDidMount() {
        let toolbar = this.props.pluginToolbars[this.props.id];
        let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
        let config = apiPlugin.getConfig();
        let box = this.props.boxes[this.props.id];
        let container = box.container;
        let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
        let leftO = offsetEl.left || 0;
        let topO = offsetEl.top || 0;
        offsetEl;
        let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
        let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });

        let targets = this.props.grid ? [gridTarget] : [];
        let dragTargets = this.props.grid ? [dragTarget] : [];
        apiPlugin.afterRender(this.refs.content, toolbar.state);
        let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
        let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
        let canvas = this.props.containedViewSelected === 0 ?
            document.getElementById('canvas') :
            document.getElementById('containedCanvas');
        interact.dynamicDrop(true);

        interact(ReactDOM.findDOMNode(this))
            .draggable({
                snap: {
                    targets: dragTargets,
                    relativePoints: [{ x: 0, y: 0 }],

componentDidMount() {
        let toolbar = this.props.pluginToolbars[this.props.id];
        let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
        let config = apiPlugin.getConfig();
        let box = this.props.boxes[this.props.id];
        let container = box.container;
        let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
        let leftO = offsetEl.left || 0;
        let topO = offsetEl.top || 0;
        offsetEl;
        let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
        let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });

        let targets = this.props.grid ? [gridTarget] : [];
        let dragTargets = this.props.grid ? [dragTarget] : [];
        apiPlugin.afterRender(this.refs.content, toolbar.state);
        let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
        let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
        let canvas = this.props.containedViewSelected === 0 ?
            document.getElementById('canvas') :
            document.getElementById('containedCanvas');
        interact.dynamicDrop(true);

        interact(ReactDOM.findDOMNode(this))
            .draggable({
                snap: {
                    targets: dragTargets,

function dragSmallSquare() {
        // target elements with the "draggable" class
        Interact('.draggable')
            .draggable({
                // enable inertial throwing
                inertia: false,
                // keep the element within the area of it's parent
                restrict: {
                    restriction: document.getElementById("before-image-canvas"),
                    endOnly: false,
                    elementRect: {top: 0, left: 0, bottom: 1, right: 1}
                },
                snap: {
                    targets: [
                        Interact.createSnapGrid({x: 8, y: 8})
                    ],
                    range: Infinity,
                    relativePoints: [{x: 0, y: 0}]
                },
                // enable autoScroll
                autoScroll: true,

                // call this function on every dragmove event
                onmove: dragMoveListener
                // call this function on every dragend event
            });

        function dragMoveListener(event) {
            var target = event.target;
            // keep the dragged position in the data-x/data-y attributes

componentDidMount() {
        let toolbar = this.props.pluginToolbars[this.props.id];
        let apiPlugin = Ediphy.Plugins.get(toolbar.pluginId);
        let config = apiPlugin.getConfig();
        let box = this.props.boxes[this.props.id];
        let container = box.container;
        let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
        let leftO = offsetEl.left || 0;
        let topO = offsetEl.top || 0;
        offsetEl;
        let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
        let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });

        let targets = this.props.grid ? [gridTarget] : [];
        let dragTargets = this.props.grid ? [dragTarget] : [];
        Ediphy.Plugins.get(config.name).getConfig();
        Ediphy.Plugins.get(config.name).afterRender(this.refs.content, toolbar.state);
        let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
        let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
        let canvas = this.props.containedViewSelected === 0 ?
            document.getElementById('canvas') :
            document.getElementById('containedCanvas');
        interact.dynamicDrop(true);
        interact(ReactDOM.findDOMNode(this))
            .draggable({
                snap: {
                    targets: dragTargets,

.resizable({
            // resize from all edges and corners
            edges: {
                // We don't want it to be resizable from the top since
                // it interferes with the area dedicated to moving the div
                left: true,
                right: true,
                bottom: true,
            },

            ignoreFrom: '#game-chat-modal-header',

            modifiers: [
                // Keep the modal within the bounds of the page
                // (the parent is the  element)
                interact.modifiers!.restrictEdges({
                    outer: 'parent',
                }),

                // Define a minimum size for the modal
                interact.modifiers!.restrictSize({
                    min: {
                        width: 200,
                        height: 200,
                    },
                }),
            ],
        })

        .on('resizemove', (event: any) => {
            // Get the new position based on the delta between the event and the old position
            // (which is conveniently stored in the "data-x" and "data-y" attributes)

let offsetEl = document.getElementById('maincontent') ? document.getElementById('maincontent').getBoundingClientRect() : {};
        let leftO = offsetEl.left || 0;
        let topO = offsetEl.top || 0;
        offsetEl;
        let gridTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: Math.floor(SNAP_DRAG / 2), offset: { x: leftO, y: topO } });
        let dragTarget = interact.createSnapGrid({ x: SNAP_DRAG, y: SNAP_DRAG, range: (SNAP_DRAG / 2 + 1), offset: { x: leftO, y: topO } });

        let targets = this.props.grid ? [gridTarget] : [];
        let dragTargets = this.props.grid ? [dragTarget] : [];
        apiPlugin.afterRender(this.refs.content, toolbar.state);
        let dragRestrictionSelector = ".parentRestrict"; // isSortableContainer(box.container) ? ".scrollcontainer" : "parent";
        let resizeRestrictionSelector = isSortableContainer(box.container) ? "body" : "parent";
        let canvas = this.props.containedViewSelected === 0 ?
            document.getElementById('canvas') :
            document.getElementById('containedCanvas');
        interact.dynamicDrop(true);

        interact(ReactDOM.findDOMNode(this))
            .draggable({
                snap: {
                    targets: dragTargets,
                    relativePoints: [{ x: 0, y: 0 }],
                },
                enabled: box.draggable,
                restrict: {
                    restriction: dragRestrictionSelector,
                    elementRect: { top: 0, left: 0, bottom: 1, right: 1 },
                },
                autoScroll: {
                    container: canvas,
                    margin: 50,
                    distance: 6,