PixiJS Viewport拖拽子元素异常：需兼顾拖拽与点击功能

问题出在你设置了方块为interactive: true，默认情况下pixi-viewport的drag功能会忽略交互元素，导致在方块上拖拽时出现冲突，同时点击和拖拽的逻辑也需要明确区分。

你可以通过修改drag方法的配置，允许在交互元素上触发拖拽，并设置拖拽阈值来区分点击和拖拽动作：

• 给drag()添加配置项，设置ignoreInteractive: false（允许在交互元素上拖拽）和dragThreshold（拖拽触发的最小移动距离，避免误触）
• 保持方块的interactive: true和点击事件不变

修改后的完整代码：

import { Application, Sprite, Texture } from 'pixijs';
import { Viewport } from 'pixi-viewport'

const app = new Application({
  backgroundAlpha: 1,
  width: innerWidth, 
  height: innerHeight,
  antialias: true,
})
document.body.appendChild(app.view)

const stage = new Viewport({
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  worldHeight: 1000,
  worldWidth: 1000,
})
app.stage.addChild(stage)

// 修改drag的配置
stage
  .drag({
    ignoreInteractive: false,
    dragThreshold: 5 // 移动超过5px才触发拖拽，否则视为点击
  })
  .pinch()
  .wheel()
  .decelerate()
  .setZoom(0.5)
  .clampZoom({ maxScale: 2, minScale: 0.3 })
  .interactiveChildren = true

for (let x = 0; x < 25; x++) {
  for (let y = 0; y < 25; y++) {
    Spawn(x, y)
  }
}

function Spawn(x, y) {
  const box = Sprite.from(Texture.WHITE)
  box.position.set(x * Texture.WHITE.width, y * Texture.WHITE.height)
  box.scale.set(0.90)
  box.on('click', () => console.log('box clicked!'))
  box.interactive = true
  stage.addChild(box)
}

这样设置后：

• 在方块上点击且移动距离小于5px时，会触发方块的click事件
• 在方块上拖拽移动超过5px时，会触发Viewport的拖拽，实现舞台移动

内容的提问来源于stack exchange，提问作者Meysam Ghorbani