How to use the interactjs function in interactjs

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 });
        }

    }

configureDropZone(node, dropArea, selector, extraParams) {
        interact(node).dropzone({
            accept: selector,
            overlap: 'pointer',
            ondropactivate: function(e) {
                e.target.classList.add('drop-active');
            },
            ondragenter: function(e) {
                e.target.classList.add("drop-target");
            },
            ondragleave: function(e) {
                e.target.classList.remove("drop-target");
            },
            ondrop: function(e) {
                let draggingFromRibbon = e.relatedTarget.className.indexOf("rib") !== -1;
                let clone = document.getElementById('clone');
                if (clone) {
                    clone.parentNode.removeChild(clone);

configureDropZone(node, selector, extraParams) {
        let alert = (msg)=&gt;{return (<i style="{{">warning</i>{ i18n.t("messages.alert") } }
            closeButton onClose={()=&gt;{this.setState({ alert: null });}}&gt;
            <span> {msg} </span>
        );};
        interact(node).dropzone({
            accept: selector,
            overlap: 'pointer',
            ondropactivate: (e) =&gt; {

                let pluginDraggingFromRibbonIsNotComplex = e.relatedTarget.className.indexOf("rib") === -1 || !e.relatedTarget.getAttribute("name") ||
                  !this.isComplex(e.relatedTarget.getAttribute("name"));
                let pluginDraggingFromCanvasIsNotComplex = e.relatedTarget.className.indexOf("rib") !== -1 || (this.props.pluginToolbars[this.props.boxSelected ] &amp;&amp;
                  this.props.pluginToolbars[this.props.boxSelected ].pluginId &amp;&amp;
                  !this.isComplex(this.props.pluginToolbars[this.props.boxSelected ].pluginId));
                let notYourself = e.relatedTarget.className.indexOf("rib") !== -1 || this.props.parentBox.id !== this.props.boxSelected;

                if (notYourself &amp;&amp; pluginDraggingFromRibbonIsNotComplex &amp;&amp; pluginDraggingFromCanvasIsNotComplex) {
                    e.target.classList.add('drop-active');
                }
            },
            ondragenter: function(e) {

componentDidUpdate() {
        let container;
        if(this.props.containedViewSelected !== 0) {
            container = "containedCanvas";
        }else{
            container = "canvas";
        }
        interact(".rib")
            .draggable({
                autoScroll: {
                    container: document.getElementById(container),
                    margin: 50,
                    speed: 400,
                    distance: 0,
                    interval: 0,
                },
            });

    }

componentDidMount() {
        interact(ReactDOM.findDOMNode(this.refs.slideDropZone)).dropzone({
            accept: '.floatingEditorBox, .dnd',
            overlap: 'pointer',
            ondropactivate: function(event) {
                event.target.classList.add('drop-active');
            },
            ondragenter: function(event) {
                event.target.classList.add("drop-target");
            },
            ondragleave: function(event) {
                event.target.classList.remove("drop-target");
            },
            ondrop: function(event) {

                let mc = this.props.fromCV ? document.getElementById("contained_maincontent") : document.getElementById('maincontent');
                let al = this.props.fromCV ? document.getElementById('airlayer_cv') : document.getElementById('airlayer');
                let rect = event.target.getBoundingClientRect();

componentWillUnmount() {
        interact(ReactDOM.findDOMNode(this)).unset();
        interact(".editorBoxSortableContainer").unset();
    }

mountInteract() {
    const leftResize = this.props.useResizeHandle ? ".rct-item-handler-resize-left" : true
    const rightResize = this.props.useResizeHandle ? ".rct-item-handler-resize-right" : true

    interact(this.item)
      .resizable({
        edges: {
          left: this.canResizeLeft() && leftResize,
          right: this.canResizeRight() && rightResize,
          top: false,
          bottom: false
        },
        enabled:
          this.props.selected && (this.canResizeLeft() || this.canResizeRight())
      })
      .draggable({
        enabled: this.props.selected && this.canMove()
      })
      .styleCursor(false)
      .on('dragstart', e => {
        if (this.props.selected) {

componentWillUnmount() {
    interact(this.crop)
      .unset()
  }

configureResizable(item) {
        interact(item).resizable({
            enabled: this.props.id === this.props.boxSelected && item.style.height !== "auto",
            edges: { left: false, right: false, bottom: true, top: false },
            autoScroll: {
                container: document.getElementById('canvas'),
                margin: 50,
                distance: 0,
                interval: 0,
            },
            onmove: (event) => {
                event.target.style.height = event.rect.height + 'px';
            },
            onend: (event) => {
                this.props.onSortableContainerResized(event.target.getAttribute("data-id"), this.props.id, parseInt(event.target.style.height, 10));
            },
        });
    }