文章/答案/技术大牛

发布

js中的interact

interact.js 是一个用于拖放、调整大小和多点触控手势的 JavaScript 库。它提供了一个简单而强大的 API 来处理这些交互，而不需要依赖 jQuery 或其他库。

基础概念

interact.js 允许开发者通过简单的配置来定义元素如何响应用户的交互，如拖动、缩放等。它通过监听鼠标和触摸事件来实现这些功能，并且可以很容易地与现有的网页元素集成。

优势

轻量级：interact.js 是一个非常轻量级的库，不会对页面加载速度产生太大影响。
灵活性：它提供了丰富的配置选项，可以满足各种复杂的交互需求。
跨浏览器兼容性：interact.js 支持多种浏览器，包括移动设备上的浏览器。
无依赖：不需要依赖其他库，可以直接在项目中使用。

类型

拖放（Drag and Drop）：允许用户拖动元素到页面上的其他位置。
调整大小（Resizing）：允许用户通过拖动元素的边缘来改变其大小。
多点触控手势（Multi-touch Gestures）：支持缩放、旋转等多点触控操作。

应用场景

网页布局编辑器：用户可以通过拖放和调整大小来创建和修改网页布局。
在线绘图工具：允许用户在画布上自由绘制和编辑图形。
移动应用界面：在移动设备上实现直观的手势控制。

示例代码

以下是一个简单的 interact.js 拖放示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interact.js Drag and Drop Example</title>
<style>
  #draggable {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 100px;
    cursor: grab;
  }
</style>
</head>
<body>

<div id="draggable">Drag me!</div>

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script>
  interact('#draggable')
    .draggable({
      inertia: true,
      modifiers: [
        interact.modifiers.restrictRect({
          restriction: 'parent',
          endOnly: true
        })
      ],
      autoScroll: true,
      listeners: {
        move: dragMoveListener
      }
    });

  function dragMoveListener (event) {
    var target = event.target;
    var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
</script>

</body>
</html>

可能遇到的问题及解决方法

元素无法拖动：
- 确保 interact.js 库已正确加载。
- 检查选择器是否正确指向了需要拖动的元素。
- 确保没有其他 CSS 属性（如 position: fixed）阻止了元素的移动。

拖动时出现卡顿：
- 减少页面上的复杂动画或重绘区域。
- 使用 requestAnimationFrame 来优化动画性能。
- 调整 interact.js 的配置参数，如关闭惯性效果（inertia: false）。
跨浏览器兼容性问题：
- 确保在不同浏览器上测试应用。
- 使用 interact.js 提供的浏览器兼容性检查功能。

通过以上信息，你应该能够理解 interact.js 的基本概念、优势、应用场景以及如何解决常见问题。

当我使用导入的第三方JS模块编写Typescript时，如何让intellisense与VS代码一起工作？

、

我的typescript文件中有以下导入我在相对路径../../../typings/interactjs/interact.d.js

浏览 0提问于2016-01-08得票数 1

1回答

如何让requirejs在interact.js上工作？

、、、

在尝试了很多东西之后，interact.js不再使用require.js由于没有“定义”模块的第三方库需要在shim配置中指定，所以我尝试了一下：baseUrl: 'scripts', 'interact': 'include/interact.min'

浏览 14提问于2015-05-20得票数 0

2回答

如何从JavaScript调用单个Idris函数？

、、

f: String -> String我知道我可以用Main.main函数编译整个模块，并输出或多或少难以理解的JavaScript。我可以用手从那里提取我的功能吗？我该怎么做呢？ P.S.，尽管我回答了自己，我仍然在寻找一个更好的解决方案，所以欢迎你。

浏览 0提问于2019-07-19得票数 4

0回答

谷歌Chrome v55的Interact.js问题

、、

'pageX' of undefined at getPageXY (interact.js:654) at Interaction.setEventXY (interact.js:1307) at Interaction.pointerMove (interact</e

浏览 10提问于2016-12-19得票数 0

回答已采纳

1回答

禁用错误的类型记录错误

、、、

我已经在jspm中安装了'interact.js‘(和npm以使类型记录快乐)。该应用程序运行良好，但我的代码显示了错误：// ==> typescript error: TS2307: Cannot find module 'interact.js</e

浏览 1提问于2016-04-20得票数 4

回答已采纳

1回答

interact.js拖动中的键盘支持

、、、

我把interact.js设置为- .draggable({ onmove: (event: Interact.InteractEvent) => onmoveRef.current(event),

浏览 11提问于2022-07-24得票数 0

1回答

使用DefinitelyTyped的Angular2上的Interact.js

、、

我在项目中安装了interact.js angular2，但我不知道如何使用文档中描述的方法。我的导入如下在Angular2中是否存在全服务interact.js的可能性？如何创建对拖放的支持？ DT

浏览 1提问于2016-06-06得票数 4

1回答

从interact js "interact('.dropzone').dropzone访问属性

、

我尝试访问ondrop函数中的道具(可能稍后还会访问其他道具)，但我无法从那里访问道具。以下是代码// listen for drop related events: 我还没有找到任何如何解决它的线索。

浏览 6提问于2020-03-10得票数 0

1回答

只加载一次interact.js

、、

我在这里使用interact.js：我使用它的网站将通过导航ajax加载。这里的问题是，如果客户端单击导航x次，interact.js将被加载并再次加载。正常应该不是问题，但我需要确保interact.js只加载一次。

浏览 8提问于2017-07-03得票数 1

3回答

Typescript在node_modules文件夹的定义文件中找不到类型

、、

我有一个项目，它有这样的结构：├── package.config│ ├── interactjs/ }, "typescript": "3.2.2"} 我的.文件中包含一些手动

浏览 2提问于2018-12-26得票数 3

2回答

无法在html svg中获得输出。

、、、

我正在做一个项目，我需要在我的图像上创建可调整大小的矩形。我发现这个代码很有用：你能告诉我我错过了什么吗。this.el.setAttribute('height', this.h - this.stroke);} interact(

浏览 3提问于2018-02-01得票数 2

回答已采纳

2回答

vue组件的interact.js

、、、

现在，我想尝试一下interact.js，因为它听起来像是一个很好的、维护良好的库。当我在我的项目中使用vue时，我现在对如何处理这个问题感到有点困惑。我找到了这个博客文章，它使用interact.js和可刷卡，并试图使它适合我的目的。" ref="interactElement" <slot/> </

浏览 7提问于2020-06-02得票数 0

1回答

使用Interact JS调整大小

、、

Te文件显示意外的标识符错误。有谁能帮帮我吗？我已经使用interactJS调整了类resize-drag中元素的大小。我已经包含了HTML、CSS和Javascript文件。我只是想实现Interact.js网站上的调整大小的例子。interact('.resize-drag') onmove: window.dragMoveListener, intera

浏览 0提问于2019-04-19得票数 0

1回答

用interact.JS拖动

、

如何使用Interact.JS在两个引导列之间拖动对象？见。--/ container-->我有一个具有ID=drag-1的对象，它可以在左列(Class= boardLeft)上拖动，但我不能将它拖到右列(Class= boardRight)如何将它拖到正确的列上？

浏览 2提问于2016-02-14得票数 1

回答已采纳

1回答

我正在尝试学习如何使用interact.js库，但我无法将调整大小的示例设置为可拖动。我可以调整div ".resize-drag“的大小，但我不知道如何让它可拖动。有人能告诉我我的代码有问题吗？这段代码只是为了让我可以学习实现提供的调整大小的例子，到目前为止，我已经尝试使用npm而不是script标签。我从interact.js网站的顶部复制了下面的示例，并将interact claus

浏览 6提问于2019-02-07得票数 1

1回答