erkennen, wenn eine andere Ansicht berührt wird - Ziehen mit PanResponder in reagieren native

Question

Ich habe ein Kartenspiel, wo der Benutzer Karten um einen Bildschirm ziehen kann.

Wie kann ich feststellen, ob die Karten über andere View-Komponenten gezogen wurden? Meine ziehbar Kartencode ist wie folgt:

// 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

Sie fügen die onDragOver = {} this.onThisDragOver Ereignis einer enthält div. Das an die Methode übergebene Ereignis enthält x- und y-Koordinaten. Jedes der Elemente im Container benötigt eine ID.

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

Ich weiß nicht, ob dies der beste Weg, um darüber zu gehen sei, aber ich würde nur die onLayout der Ziel Ansichten erhalten, um die x, y, Breite zu erhalten, und Höhe ...

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

die Koordinaten, die durch den Behälter abgedeckt würde einfach sein (x, x + Breite) und (y, y + Höhe)

onPanResponderGrant erhalten die Lage des ziehbar:

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

Die ziehbar umfasst nun currentX0-currentX0 + width und currentY0-currentY0 + height ...

:

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

onPanResponderMove Sie etwas tun können

Mit diesen Werten können Sie überprüfen, ob es mit der Zielansichtüberlapptund (y, y+height)