interactJS

简介

interact.js 是一个 JavaScript 资源库提供拖，放，调整尺寸和多点触摸手势功能用于现代浏览器。它的免费和开源版本提供了强大的配置像惯性和指针、约束调整器。

interact.js Pro 使用更多的调节器扩展了该开源功能，更多复杂的内置交互，框架集成，和高级开发工具，用于节省您的事件和劳动力。

该资源库聚焦于 持续呈现指针输入事件 在不同的浏览器和设备，提供方便的方法 在用户鼠标指针没有移动的时候假装在移动 (吸附, 惯性, 等)。

interact 函数接收一个元素或者 CSS 选择器字符串，并返回一个 Interactable 拥有很多方法的对象用于配置动作和事件监听器。指针交互队列按下 -> 移动 -> 弹起，启动拖，调整尺寸，或手势动作。通过添加事件监听器方法，您可以为 InteractEvent 事件提供反馈，该事件包含了指针坐标，速度，元素大小等。

请注意在默认情况下 interact.js 不会替您移动元素。通过您自己的事件监听器，装饰（Styling）一个元素，让该元素跟随拖动的过程移动。这样，您可以控制发生的任何事情。

基础使用

创建实例

const target = interact('.className' | '#idName')

// 通过元素实例
const element = document.getElementById('el')
const target = interact(element)

基础概念

限制器

拖拽

const modifiers = modifiers: [
  interact.modifiers.restrict({
    restriction: 'self'|'parent'           // 保留拖动的坐标在该元素内
  })
]

function dragMoveListener (event) {
    const target = event.target;
    // keep the dragged position in the data-x/data-y attributes
    let x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
    let y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;

    // translate the element
    target.style.transform = "translate(" + x + "px, " + y + "px)";

    // update the posiion attributes
    target.setAttribute("data-x", x);
    target.setAttribute("data-y", y);
}

draggableOptions = {
    rigin: 'self',             // (0, 0) 将作为该元素的上-左
    inertia: true,             // 开启惯性移动如果该元素被甩出
    modifiers,                 // 限制器
    listeners:{
        move:dragMoveListener, // 拖拽事件处理
    }
}

target.draggable()

快速demo

interactInit(element: HTMLElement, outerId: string = "#interactInitId") {
    if (element.parentElement) {
      element.parentElement.id = "interactInitId"
    } else {
      console.error("需要指定一个parentID")
    }
    const that = this

    interact(element)
      .resizable({
        edges: { left: true, right: true, bottom: true, top: true },
        modifiers: [
          interact.modifiers.restrictEdges({ outer: outerId }),
          interact.modifiers.restrictSize({ min: { width: 10, height: 10 } }),
        ],
        listeners: {
          move: (event) => {
            const target = event.target
            let x = parseFloat(target.getAttribute("data-x")) || 0
            let 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.transform = "translate(" + x + "px," + y + "px)"
            target.setAttribute("data-x", x)
            target.setAttribute("data-y", y)

            const bounds = [x, y, Math.trunc(event.rect.width), Math.trunc(event.rect.height)]
            that.recordBounds(bounds)
            console.log(bounds)
          },
        },
      })
      .draggable({
        listeners: {
          move: (event) => {
            const target = event.target
            // keep the dragged position in the data-x/data-y attributes
            const x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx
            const y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy

            // translate the element
            target.style.transform = "translate(" + x + "px, " + y + "px)"

            // update the posiion attributes
            target.setAttribute("data-x", x)
            target.setAttribute("data-y", y)
            const bounds = [x, y, Math.trunc(event.rect.width), Math.trunc(event.rect.height)]
            that.recordBounds(bounds)
            console.log(bounds)
          },
        },
        inertia: true,
        modifiers: [
          interact.modifiers.restrictRect({
            restriction: "#imgContainerRef",
            endOnly: true,
          }),
        ],
      })
  }