interact.js 中的元素吸附功能详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00826/article/details/148392724

interact.js 中的元素吸附功能详解

interact.js JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+) 项目地址: https://gitcode.com/gh_mirrors/in/interact.js

引言

在交互式网页开发中，元素的精准定位和对齐是一个常见需求。interact.js 提供了强大的吸附(Snapping)功能，可以让元素在拖拽或调整大小时自动对齐到指定位置或尺寸。本文将详细介绍 interact.js 中的三种吸附修饰器及其使用方法。

三种吸附修饰器概述

interact.js 提供了三种吸附修饰器，分别适用于不同场景：

snap() - 基于指针坐标的吸附，最适合拖拽操作
snapSize() - 专为调整大小设计，可设置目标元素的尺寸吸附点
snapEdges() - 类似 snapSize，但可以设置目标元素边缘的位置吸附点

基础用法

1. snap() 基础使用

snap() 是最常用的吸附修饰器，它会修改指针坐标使其对齐到指定的吸附目标：

const mySnap = interact.modifiers.snap({
  targets: [
    { x: 200, y: 200 },   // 第一个吸附点
    { x: 250, y: 350 },   // 第二个吸附点
  ],
  range: 50               // 吸附范围(像素)
});

2. snapSize() 基础使用

snapSize() 用于在调整元素大小时吸附到特定尺寸：

interact(target).resizable({
  modifiers: [
    interact.modifiers.snapSize({
      targets: [
        { width: 100, height: 100 },  // 吸附到100x100尺寸
        { width: 200, range: 20 }     // 宽度吸附到200，范围20px
      ]
    })
  ]
});

3. snapEdges() 基础使用

snapEdges() 可以精确控制元素边缘的吸附位置：

interact(target).resizable({
  modifiers: [
    interact.modifiers.snapEdges({
      targets: [
        { left: 100, top: 100 },  // 左边缘和上边缘吸附到100px位置
        { right: 500, range: 30 }  // 右边缘吸附到500px位置，范围30px
      ]
    })
  ]
});

高级配置

相对点(relativePoints)配置

默认情况下，吸附是基于指针位置的。但我们可以指定元素上的特定点作为吸附基准：

interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [ { x: 300, y: 300 } ],
      relativePoints: [
        { x: 0, y: 0 },    // 相对于元素左上角
        { x: 0.5, y: 0.5 },// 相对于元素中心
        { x: 1, y: 1 }     // 相对于元素右下角
      ]
    })
  ]
});

偏移量(offset)配置

偏移量可以调整吸附目标的实际位置：

// 固定偏移量
interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [ { x: 300, y: 300 } ],
      offset: { x: 20, y: 20 }  // 所有目标向右下偏移20px
    })
  ]
});

// 动态偏移量
interact(element).resizable({
  modifiers: [
    interact.modifiers.snap({
      targets: [ { x: 300, y: 300 } ],
      offset: 'startCoords'  // 使用动作开始时的坐标作为偏移基准
    })
  ]
});

动态吸附目标

吸附目标不仅可以是静态坐标，还可以是动态生成的：

interact.modifiers.snap({
  targets: [
    function(x, y, interaction) {
      // 生成正弦曲线上的吸附点
      return {
        x: x,
        y: 75 + 50 * Math.sin(x * 0.04),
        range: 40
      };
    }
  ]
});

网格吸附

interact.js 提供了便捷的网格吸附功能：

var gridTarget = interact.snappers.grid({
  x: 50,          // 横向网格间距
  y: 50,          // 纵向网格间距
  range: 10,      // 吸附范围
  offset: { x: 5, y: 10 },  // 网格偏移
  limits: {       // 网格边界
    top: 0,
    left: 0,
    bottom: 500,
    right: 500
  }
});

interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({ targets: [gridTarget] })
  ]
});

吸附范围控制

吸附范围可以全局设置，也可以为每个目标单独设置：

interact(element).draggable({
  modifiers: [
    interact.modifiers.snap({
      targets: [
        { x: 20, y: 450, range: 50 },  // 此目标范围50px
        { x: 10, y: 0 }                // 使用默认范围300px
      ],
      range: 300  // 默认范围
    })
  ]
});

事件中的吸附信息

在事件监听器中，可以获取吸附的详细信息：

interact(target).draggable({
  modifiers: [interact.modifiers.snap({ targets: [...] })],
  listeners: {
    move(event) {
      const snapInfo = event.modifiers[0];
      console.log('吸附到的位置:', snapInfo.x, snapInfo.y);
      console.log('吸附源:', snapInfo.source);
    }
  }
});