Interact.js provides two free libraries for your project:

  1. For easy quick enablement, you can use the name asinteractjsThe resource library is on NPM. This repository provides all the functionality already packaged for this repository
  2. If you want to keep your JS to a small size@interactjs/Scope allows you to select the functionality you want to use. These repositories are provided as ES6 modules and require your own transcoding to support older browsers.

The use of NPM

Install a packaged, full-featured repository
$ npm install --save interactjs
Copy the code
// es6 import method
import interact from 'interactjs'
// If you use commonJS or AMD modules
const interact = require('interactjs')
Copy the code

Using the packaged repository hosted on NPM, install the repository as a dependency using the NPM install InteractJS directive and then import or require the repository in your JavaScript file

Use the CDN

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<! - or - >
<script src="https://unpkg.com/interactjs/dist/interact.min.js"></script>
Copy the code

You can also use jsDelivr or UNpKG or BOOtcDN CDNs to point to their server by adding

Interact is exported as a CommonJS module, AMD module, or a global variable, depending on the current environment support

Install type definitions
$ npm install --save-dev @interactjs/types
Copy the code

If you use the repository through CDN and want TypeScript definitions to develop, you can install the @InteractJS/Types repository as a development dependency.

NPM process

Install only the features you need
$ npm install --save @interactjs/interact \
  @interactjs/auto-start \
  @interactjs/actions \
  @interactjs/modifiers \
  @interactjs/dev-tools
Copy the code
import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

interact('.item').draggable({
  listeners: {
    move (event) {
      console.log(event.pageX, event.pageY)
    }
  }
})
Copy the code

With more detailed JS payloads, you can install and reference any functionality you need in the repository

Resource library Name describe
@interactjs/interact (Necessary)provideinteract()function
@interactjs/actions Drag, resize, gestures, etc
@interactjs/auto-start Start action by mouse click, move sequence
@interactjs/modifiers Pointers, constraints, etc. regulator
@interactjs/snappers provideinteract.snappers.grid()function
@interactjs/inertia Drag and drop to resize inertial support
@interactjs/reflow interactable.reflow(action)The function is used to trigger regulators and event listeners
@interactjs/dev-tools Debugger warnings for common errors (inNODE_ENV === 'production'Removed) and the Babel plug-in for optimizing production resources

CDN process

<script type="module">
import 'https://cdn.interactjs.io/v1.9.20/auto-start/index.js'
import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'
import 'https://cdn.interactjs.io/v1.9.20/actions/resize/index.js'
import 'https://cdn.interactjs.io/v1.9.20/modifiers/index.js'
import 'https://cdn.interactjs.io/v1.9.20/dev-tools/index.js'
import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'

interact('.item').draggable({
  onmove(event) {
    console.log(event.pageX,
                event.pageY)
  }
})
</script>
Copy the code

Repository provided above can also be obtained through https://cdn.interactjs.io/v [VERSION] / [UNSCOPED_NAME], you can through the ES6 in modern browsers import into them.

Ruby on Rails

Rails 5.1+ supports YARN, so you can add interact. Js to your should via the YARN Add interactJS directive. Then import the repository through:

//= require interactjs/interact
Copy the code