Dragging work on the responsive preview but doesn't in the desktop view

[GuillaumeTech]

Hi !

First off, thanks for your work on this lib. I'm messing around a bit with it to create a simple image pan/zoom component
It's working like charm on the mobile preview in Chrome. However when I switch to the usual desktop view I can only pan for a tiny amount then my cursor is disabled.

Here is a video of it, what you see in the console is the offset values :
https://user-images.githubusercontent.com/27060431/127081364-279fff8b-3663-4091-b69f-6ac948c0f761.mp4

I'm without a doubt missing something but I can't figure out what, did anyone encountered the same issue ? or have and idea ?
I've tried allowing all pointer-event on the image so I could get rid of that not-allowed cursor but it didn't do anything

I'm using Chrome 91.0.4472.164
here is my code, I started from npx create-react-app my-app --template typescript, so adding Pan.tsx and updatingApp.tsxand Index.css should get you the same setup

Pan.tsx

import React, {useState, useRef} from 'react';

import {useDrag} from '@use-gesture/react'
type Props = {
  imageSrc: string;
}; 


function ImagePanner( { imageSrc }: Props) {
  let imageRef = useRef(null)
  const [offset, setOffset] = useState({x:0,y:0})
  useDrag(({offset: [dx,dy]} :{offset:Array<number>})=>{
    setOffset({x:dx, y:dy})
    console.log(dx,dy)
  }, { target: imageRef }

  )
  const {x, y} = offset
  return (
    <>
    <div className="pan-container">
     <img src={imageSrc} 
      ref={imageRef}
      style={{
        transform: `translate(${x}px, ${y}px)`
      }}
      className="image-pan" />
    </div>
    </>
  );
}

export default ImagePanner;

Index.css

.pan-container{
  overflow: hidden;
  width: 70rem;
  height: 70rem;
  margin: auto;
  pointer-events: all;
  touch-action: none;
}

.image-pan{
  position: relative;
  touch-action: none;
  pointer-events: all;
  cursor: pointer;
}

App.tsx

import './App.css';
import ImagePanner from './Pan';
import image from './image-test.jpg'

function App() {
  return (
    <div className="App">
      <ImagePanner imageSrc={image} />
    </div>
  );
}

export default App;

[GuillaumeTech]

Got it working by adding draggable={false} in the img attributes:

<img src={imageSrc} 
      ref={imageRef}
      draggable={false}`
      style={{
        transform: `translate(${x}px, ${y}px)`
      }}
      className="image-pan" />

Wild guess is that the browser default to dragable to true, but that actually means that you can drag a semi-transparent copy of that image under the cursor. but there is nowhere to drop that image hence the cursor-cancel. And it work with the mobile preview since in that case the dragable default to false ? I would be curious to a have the full explanation if anyone knows.

[dbismut]

This is documented in the docs: https://v10-beta--use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link. I realize this uses another technique than draggable={false} which might be a better solution actually so I'll probably update the docs. However, this technique doesn't suffice on Firefox in my latest tests, so you'll also need to run event.preventDefault() so that it works correctly.

Let me know if you need further clarification.

[GuillaumeTech]

Hi !
ahhh sorry missed that in the docs, thanks for the clarification !