npm 包 @interactjs/interactjs 使用教程

介绍

@interactjs/interactjs 是一个帮助前端开发者实现拖拽、缩放、旋转、触摸等互动操作的工具库。它支持触摸屏设备和鼠标操作设备，可以实现多种操作效果，并且使用起来非常方便，可以快速实现互动效果，提升前端应用的用户体验。

安装

@interactjs/interactjs 是一个 npm 包，可以通过 npm 安装：

npm install @interactjs/interactjs

同时，为了使用 @interactjs/interactjs，你还需要在页面中引入他所依赖的两个库：@tweenjs/tween.js 和@popperjs/core，你可以使用以下命令进行安装：

npm install @tweenjs/tween.js @popperjs/core

安装完成后，你就可以在项目中使用 @interactjs/interactjs 了。

使用

@interactjs/interactjs 具有多种使用方式，下面是几种常用的方式：

实例化对象：

import interact from '@interactjs/interactjs';
 
interact(target).draggable({
  // 操作参数
});

其中 target 可以是拖拽的目标元素，也可以是匹配目标元素的选择器字符串。

事件：

interact('.drag-element')
  .draggable({
    // 操作参数
  })
  .on('dragmove', function (event) {
    console.log('dragging', event.pageX, event.pageY);
  });

在拖拽的过程中，会触发 dragmove 事件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2b5bee3b0ab45f74a8bb2b