Drag not working on example

Hey, I noticed that in the example provided in the repo’s README dragging doesn’t work even though the viewport.drag() is being called, is it supposed to be like that? How could this code be modified to allow dragging?

import * as PIXI from 'pixi.js'
import { Viewport } from 'pixi-viewport'

const app = new PIXI.Application()
document.body.appendChild(app.view)

// create viewport
const viewport = new Viewport({
    screenWidth: window.innerWidth,
    screenHeight: window.innerHeight,
    worldWidth: 1000,
    worldHeight: 1000,

    interaction: app.renderer.plugins.interaction // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
})

// add the viewport to the stage
app.stage.addChild(viewport)

// activate plugins
viewport
    .drag()
    .pinch()
    .wheel()
    .decelerate()

// add a red box
const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
sprite.tint = 0xff0000
sprite.width = sprite.height = 100
sprite.position.set(100, 100)

Thanks in advance.

[iosonosempreio]

Hi, I had the same issue in a project which combines ReactJS and PIXIjs.

The problem turned out to be related to a z-index set on the div that contains the canvas generated by PIXI. Once I removed the pan/drag got restored.

In my project, the code looked like this (the div in the render is where PIXIjs operates).

render() {
    const elmStyle = {
        width: "100vw",
        height: "100vh",
        position: "absolute",
        top: 0,

        // remove this
        🚨 zIndex: -10   
    };
    return <div id="pixi-js-inside-of-here" style={elmStyle} ref={this.init.bind(this)}></div>;
}

I figured it out because I remembered I had the same issue with a d3js generated SVG which I wanted to zoom and pan. To me this indicates the z-index property may generally affects pointer events behavior, probably in relation to which other elements are there in the page. However it looks weird to me that only the drag was broken, while the scroll-wheel zoom and the pinch zoom did not present any issues.

[davidfig]

Good find. The wheel uses a separate event that attaches to document (I think). So that makes sense. If you’re talking about the trackpad pinch then that also makes sense for the same reason. If you’re talking about the touchscreen pinch then I agree that does not make sense since it uses the same event listeners as the drag.