介绍

今天要介绍的库名称为interact.js，具有惯性和捕捉功能的JavaScript拖放，调整大小和多点触摸手势库，兼容IE9+浏览器。

Github

https://github.com/taye/interact.js

基本特性

• 免费和开源
• 强大的捕捉和限制修饰
• 惯性投掷
• 多个同时互动
• 触摸和鼠标事件的统一API
• 自动滚屏
• 支持HTML和SVG

与大多数拖放库相比，interact.js采用的方法略有不同。为了尽可能多的控制，它尝试提供一个简单，灵活的API，该API提供所有需要移动元素的指针事件数据。

案例

• 拖拽

interact('.draggable')
  .draggable({
    // 启用惯性投掷
    inertia: true,
    // 将元素保留在其父元素的区域内
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    // 启用自动滚动
    autoScroll: true,

    listeners: {
      // 在每个dragmove事件上调用此函数
      move: dragMoveListener,

      // 在每个dragend事件中调用此函数
      end (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')
      }
    }
  })

function dragMoveListener (event) {
  var target = event.target
  // 将拖动的位置保持在data-x / data-y属性中
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

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

  // 更新位置属性
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
}

// 稍后在调整大小和手势演示中使用此功能
window.dragMoveListener = dragMoveListener

• 缩放

interact('.resize-drag')
  .resizable({
    //从所有边缘和角落调整大小
    edges: { left: true, right: true, bottom: true, top: true },

    listeners: {
      move (event) {
        var target = event.target
        var x = (parseFloat(target.getAttribute('data-x')) || 0)
        var y = (parseFloat(target.getAttribute('data-y')) || 0)

        // 更新元素的样式
        target.style.width = event.rect.width + 'px'
        target.style.height = event.rect.height + 'px'

 
        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)
      }
    },
    modifiers: [
      //将边缘保留在父级内部
      interact.modifiers.restrictEdges({
        outer: 'parent'
      }),

      // 最小尺寸
      interact.modifiers.restrictSize({
        min: { width: 100, height: 50 }
      })
    ],

    inertia: true
  })
  .draggable({
    listeners: { move: window.dragMoveListener },
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  })

• SVG

<div class="star-wrapper">
  <object id="star-demo" type="image/svg+xml" data="/img/star.svg" alt="embedded svg"></object>

  <p style="padding: 0 5%">
    The <a href="https://github.com/taye/interact.js/blob/master/examples/star/star.svg?short_path=e1e0fe0">star.svg</a>
    file references interact.js as well as
    <a href="https://github.com/taye/interact.js/blob/master/examples/star/index.js"> another script</a>
    to enable and respond to drag events.
  </p>
</div>

• 双击效果

interact('.tap-target')
  .on('tap', function (event) {
    event.currentTarget.classList.toggle('switch-bg')
    event.preventDefault()
  })
  .on('doubletap', function (event) {
    event.currentTarget.classList.toggle('large')
    event.currentTarget.classList.remove('rotate')
    event.preventDefault()
  })
  .on('hold', function (event) {
    event.currentTarget.classList.toggle('rotate')
    event.currentTarget.classList.remove('large')
  })

安装

npm install interactjs

支持typescript

npm install --save-dev @interactjs/types

总结

详细的使用方式可以参考官方详细的文档