wykrywa, kiedy dotknie się innego widoku - przeciąganie za pomocą PanResponder reaguje natywnie

Question

Mam grę karcianą, w której użytkownik może przeciągać karty po ekranie.

Jak wykryć, czy karty zostały przeciągnięte na inne komponenty widoku? Moja przeciągany kod karty jest tak:

// A draggable card 
// drag drop code example used: https://github.com/brentvatne/react-native-animated-demo-tinder 
// panresponder docs: https://facebook.github.io/react-native/docs/panresponder.html 

class Card extends React.Component { 
    componentWillMount() { 
    this.state = { 
    pan: new Animated.ValueXY(), 
    enter: new Animated.Value(1), 
    } 

    this._panResponder = PanResponder.create({ 

    onMoveShouldSetResponderCapture:() => true, 
    onMoveShouldSetPanResponderCapture:() => true, 
    onPanResponderGrant: (e, gestureState) => { 
       Animated.spring(this.state.enter, { 
     toValue: .75, 
     }).start() 

     this.state.pan.setOffset({x: this.state.pan.x._value, 
           y: this.state.pan.y._value}); 
     this.state.pan.setValue({x: 0, y: 0}); 
    }, 

    onPanResponderMove: Animated.event([ 
     null, {dx: this.state.pan.x, dy: this.state.pan.y}, 
    ]), 

    onPanResponderRelease: (e, {vx, vy}) => { 
     // do stuff when card released 
    } 

    Animated.spring(this.state.enter, { 
     toValue: 1, 
    }).start() 

    this.state.pan.flattenOffset(); 
    var velocity; 

    if (vx >= 0) { 
     velocity = clamp(vx, 3, 5); 
    } else if (vx < 0) { 
     velocity = clamp(vx * -1, 3, 5) * -1; 
    } 

    Animated.spring(this.state.pan, { 
      toValue: {x: 0, y: toValue}, 
      friction: 4 
    }).start() 
    } 
    }) 
} 

Answer 1

Państwo dodać onDragOver = {this.onThisDragOver} zdarzenie do elementu div. Zdarzenie przekazane do metody zawiera współrzędne xiy. Każdy element w kontenerze wymaga identyfikatora.

onThisDragOver = (event) => { 
 
    event.preventDefault(); 
 
    let x = event.clientX; 
 
    let y = event.clientY; 
 
    let element = document.elementFromPoint(x, y); 
 
    let itemID = element.id; 
 
    this.dragOverIdHandler(itemID); 
 
}

Answer 2

ja nie wiem, czy będzie to najlepszy sposób, aby przejść o tym, ale ja po prostu uzyskać onLayout z docelowymi Wyświetleń zdobyć X, Y, szerokość, i wysokość ...

<View onLayout={({nativeEvent: {layout: {x,y,width,height}}) => { })} />

współrzędne objęte pojemnika po prostu być (x, x + szerokość) oraz (r, r + wysokość)

onPanResponderGrant dostać lokalizacji przeciągany:

onPanResponderGrant: (e) => { 
    this.originX = e.pageX - e.locationX; 
    this.originY = e.pageY - e.locationY; 
} 

onPanResponderMove można zrobić coś takiego:

onPanResponderMove: (e, gestureState) => { 
    const currentX0 = this.originX + gestureState.dx 
    const currentY0 = this.originY + gestureState.dy 
} 

możliwa do przesunięcia obejmuje obecnie od currentX0 do currentX0 + width iz currentY0 do currentY0 + height ...

Możesz użyć tych wartości, aby sprawdzić, czy pokrywa się z widokiem celu (x, x+width) i (y, y+height)