如何使用 Interact.js 中文文档中可交互对象的选项

可交互对象的配置选项

可交互对象的配置选项主要用于对目标元素开启和设置功能。这些选项包括：

• enabled: 设置是否开启可交互对象。
• inertia: 设置是否启用惯性。
• mouseButtons: 设置允许的鼠标按键。
• origin: 设置可交互对象的原点。
• preventDefaultDefault: 设置是否阻止默认事件。
• restrict: 设置限制区域。
• snap: 设置是否启用捕捉。
• snapEdges: 设置捕捉边缘。
• snapTolerance: 设置捕捉容忍度。
• autoScroll: 设置是否启用自动滚动。

可交互对象特有功能的选项

除了上述共有的配置选项外，可交互对象还有一些特有功能的选项。例如：

• draggable:
  • allowFrom: 设置允许拖放的元素。
  • autoScroll: 设置是否启用自动滚动。
  • axis: 设置允许拖动的轴。
  • cursorChecker: 设置光标检查器。
  • dragHandle: 设置拖动手柄。
  • edge: 设置边缘。
  • grid: 设置网格。
  • inertia: 设置是否启用惯性。
  • invert: 设置是否反转拖动方向。
  • manualStart: 设置是否手动开始拖动。
  • max: 设置最大值。
  • min: 设置最小值。
  • restrict: 设置限制区域。
  • snap: 设置是否启用捕捉。
  • snapEdges: 设置捕捉边缘。
  • snapTolerance: 设置捕捉容忍度。
• resizable:
  • allowFrom: 设置允许调整大小的元素。
  • autoScroll: 设置是否启用自动滚动。
  • axis: 设置允许调整大小的轴。
  • cursorChecker: 设置光标检查器。
  • edges: 设置边缘。
  • grid: 设置网格。
  • inertia: 设置是否启用惯性。
  • manualStart: 设置是否手动开始调整大小。
  • max: 设置最大值。
  • min: 设置最小值。
  • restrict: 设置限制区域。
  • snap: 设置是否启用捕捉。
  • snapEdges: 设置捕捉边缘。
  • snapTolerance: 设置捕捉容忍度。
• gesturable:
  • allowFrom: 设置允许手势操作的元素。
  • autoScroll: 设置是否启用自动滚动。
  • cursorChecker: 设置光标检查器。
  • edges: 设置边缘。
  • inertia: 设置是否启用惯性。
  • manualStart: 设置是否手动开始手势操作。
  • max: 设置最大值。
  • min: 设置最小值。
  • restrict: 设置限制区域。
  • snap: 设置是否启用捕捉。
  • snapEdges: 设置捕捉边缘。
  • snapTolerance: 设置捕捉容忍度。

可交互对象特有功能的事件属性

除了上述配置选项外，可交互对象还有一些特有功能的事件属性。例如：

• draggable:
  • dragmove: 拖动时触发。
  • dragend: 拖动结束时触发。
  • dragstart: 拖动开始时触发。
• resizable:
  • resizestart: 调整大小开始时触发。
  • resizemove: 调整大小时触发。
  • resizeend: 调整大小结束时触发。
• gesturable:
  • gesturestart: 手势操作开始时触发。
  • gesturemove: 手势操作时触发。
  • gestureend: 手势操作结束时触发。

结语

通过对 Interact.js 中文文档中可交互对象的选项进行了解，您可以更轻松地使用 Interact.js 来创建交互式元素。希望本指南对您有所帮助。