interact.js是一款支持元素惯性拖放和多点触摸手势的js插件。该js插件支持在桌面设备和移动手机设备中拖放元素，拖动结束时带有惯性效果。并且支持移动设备的多点触摸手势。它的特点有：

  • 带惯性和吸附效果
  • 支持多元互动
  • 跨浏览器和设备，支持桌面和移动版本的Chrome, Firefox 和 Opera浏览器以及IE8+浏览器
  • 可以和SVG元素相互作用
  • 轻量级，无任何外部依赖
  • 除非要支持IE8或修改鼠标样式，否则不用修改任何DOM元素

安装

可以通过bower或npm来安装该js插件。

bower install interact
npm install interact.js

你也可以通过下面的CDN节点来引用该js插件：

  • jsDelivr CDN 
    <script src="//cdn.jsdelivr.net/interact.js/VERSION/interact.min.js"></script>
  • cdnjs CDN 
    <script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/VERSION/interact.min.js"></script>

使用方法

互动

interact函数接收一个元素或CSS选择器和一个可选的options选项。它返回Interactable对象，该对象有一些方法和属性可以配置哪些事件可以触发以及修改结果坐标。这些方法都可以通过链式编程的方式来调用。

interact('.drag-and-resize')
  .draggable({
    snap: {
      targets: [
        { x: 100, y: 200 },
        function (x, y) { return { x: x % 20, y: y }; }
    ]}
  })
  .resizable({
    inertia: true
  });
选择器上下文

如果你想用选择器来选择一些元素，并且只想选择某些元素的子元素，可以在插件Interactable对象时，在options对象中传入一个context元素。

通过使用同样的选择器但是指定不同的上下文，interact会返回不同的对象。默认的上下文是document。

<ul id="my-list">
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ul>                
              
var myList = document.querySelector('#my-list');

interact('li', {
    context: myList
  })
  .draggable({ /* ... */ });
If you want to use a selector to target elements but only want to to target the children of a certain element, add a context element to the options object when creating the Interactable.

interact('li') === interact('li', { context: document })  // true
interact('li') === interact('li', { context: myList })    // false

配置参数

draggable、resizable和gesturable方法使用true和false来简单的允许或不允许某些行为，或者使用一个带属性的对象来改变某些设置。

interact(target)
  .draggable({
    max          : Number,
    maxPerElement: Number,
    manualStart  : Boolean,
    snap         : {/* ... */},
    restrict     : {/* ... */},
    inertia      : {/* ... */},
    autoScroll   : {/* ... */},

    axis         : 'x' || 'y'

  })
  .resizable({
    max          : Number,
    maxPerElement: Number,
    manualStart  : Boolean,
    snap         : {/* ... */},
    restrict     : {/* ... */},
    inertia      : {/* ... */},
    autoScroll   : {/* ... */},

    square       : true || false,
    axis         : 'x' || 'y'
  })
  .gesturable({
    max          : Number,
    maxPerElement: Number,
    manualStart  : Boolean,
    restrict     : {/* ... */}
  });
  • enabled：允许交互行为。如果对象参数中没有enabled选项或属性值为true那么可以执行交互行为。
  • max：max用于限制发生交互作用对象的数量。默认情况下任何数量的对象都可以发生交互作用。
  • maxPerElement：By default only 1 interaction can target the same interactable+element combination. If you want to allow multiple interactions on the same target element, set the maxPerElement property of your object to a value >= 2.
  • manualStart：设置为true时， drag, resize 和 gesture行为将被执行。
  • snap：改变drag 和 resize的snapping 设置。
  • restrict：改变 drag, resize 和 gesture的限制设置。
  • inertia：改变 drag 和 resize的惯性设置。
  • autoScroll：当 drag 或 resize发生边界溢出时滚动容器（window或一个HTML元素）

更详细的参数、事件和方法资料请参看下载包中docs文件夹下的文档。