How to use a js library like interactjs

Ionic Framework ionic-v3
1

Hello I never added an external js library to ionic ,I try to do it now but I think i miss some basic stuff.

The library:
http://interactjs.io/

My steps:

Install with npm
“npm install interactjs”

I try to copy paste the code exemple form interact.js to my ionic project home page, but when i paste the js code to the home.ts i get a lot of errors.
image
I done a research in internet and i try some things like import interact js add to variable add to index.html but i get errors always , how i know exactly what i need to do?

Thanks :slight_smile:

2

Put the interact statement INSIDE the ionViewDidLoad

Then likely a next list of issues pop up

But at least you progressed

Or put your stuff in stackblitz so we help coding

3

Or better, try this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var interact:any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  ionViewDidEnter() {

    function dragMoveListener(event) {
      var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      // translate the element
      target.style.webkitTransform =
        target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';

      // update the posiion attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }


    interact('.draggable')
      .draggable({
        // enable inertial throwing
        inertia: true,
        // keep the element within the area of it's parent
        restrict: {
          restriction: "parent",
          endOnly: true,
          elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
        },
        // enable autoScroll
        autoScroll: true,

        // call this function on every dragmove event
        onmove: dragMoveListener,
        // call this function on every dragend event
        onend: function (event) {
          var textEl = event.target.querySelector('p');

          textEl && (textEl.textContent =
            'moved a distance of '
            + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
              Math.pow(event.pageY - event.y0, 2) | 0))
              .toFixed(2) + 'px');
        }
      });



  }

}
1 Like
4

Thanks Tommertom

i done it but using
import interact from ‘interactjs’;
insted of
declare var interact:any;

Now i try to use the interact(‘.resize-drag’) but only resize works, not drag, this is something of javascript or it’s a problem of ionic integration?
I done this in stackblitz to test it.(go to homepage)

“the errors”

image
image1368×752 70.4 KB

5

ok

the stackblitz gives errors related to modules.

I would do a declare var window:any; to bypass Typescript issues, even though that is not the best way. First get it to work.

And remove the restrictEdges setting to see what happens…

Wouldn’t expect Ionic to be the issue here…

Tom

6

Works with me like a charm…

7

My problem is in this example, moving and resizing at the same time:

If you add a space in the editor in my StackBlitz link it will refresh and will not longer show the modules errors

1 Like
8

Aint working in plain vanilla. So I would dive into whatever is known about interactjs itself and this feature.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>

</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/interactjs@1.3.3/dist/interact.min.js"></script>
  <style>
    .resize-drag {
      background-color: #29e;
      color: white;
      font-size: 20px;
      font-family: sans-serif;
      border-radius: 8px;
      padding: 20px;
      margin: 30px 20px;

      width: 120px;

      /* This makes things *much* easier */
      box-sizing: border-box;
    }

    .resize-container {
      display: inline-block;
      width: 100%;
      height: 240px;
    }

  </style>
  HTML
  <div class="resize-container">
    <div class="resize-drag">
      Resize from any edge or corner
    </div>
  </div>
  <script>
    interact('.resize-drag')
      .draggable({
        onmove: window.dragMoveListener,
        restrict: {
          restriction: 'parent',
          elementRect: {
            top: 0,
            left: 0,
            bottom: 1,
            right: 1
          }
        },
      })
      .resizable({
        // resize from all edges and corners
        edges: {
          left: true,
          right: true,
          bottom: true,
          top: true
        },

        // keep the edges inside the parent
        restrictEdges: {
          outer: 'parent',
          endOnly: true,
        },

        // minimum size
        restrictSize: {
          min: {
            width: 100,
            height: 50
          },
        },

        inertia: true,
      })
      .on('resizemove', function (event) {
        var target = event.target,
          x = (parseFloat(target.getAttribute('data-x')) || 0),
          y = (parseFloat(target.getAttribute('data-y')) || 0);

        // update the element's style
        target.style.width = event.rect.width + 'px';
        target.style.height = event.rect.height + 'px';

        // translate when resizing from top or left edges
        x += event.deltaRect.left;
        y += event.deltaRect.top;

        target.style.webkitTransform = target.style.transform =
          'translate(' + x + 'px,' + y + 'px)';

        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
        target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
      });

  </script>
  sdass

</body>

</html>
2 Likes
9

thanks i ll keep working on that

1 Like
10

hi @codiqa100095421 I got the same problem in restricEdges. I try to declare var window:any; but the problem is there you know how to fix