ios - panresponder - ¿Cómo puedo crear una acción de arrastrar y soltar en Reaccionar nativo?
react native drag and drop (2)
Supongamos que tengo dos vistas, A y B. Quiero tener la capacidad de desencadenar un evento ''dragAndDropStart'' al tocar Vista A y luego habilitar una operación de arrastrar y soltar de A a B ... mostrando comentarios al usuario en todo momento (es decir, mostrando una línea que aparece entre la Vista A y el dedo del usuario). Al soltar (soltando el gesto de arrastrar) quiero activar otro evento ''dragAndDropEnd'', esta vez en la Vista B.
Los manejadores touchStart y touchEnd son demasiado limitados, ya que no parecen permitir la transferencia del gesto de una vista a otra. Tampoco parecen habilitar el estado de "arrastre" intermedio.
Los documentos nativos de React sobre el uso de los manejadores de gestos son un poco crípticos y no he visto ejemplos que demuestren su uso.
¿Algunas ideas?
tienes que ver el Rectángulo de Vista actual a otra vista Rectángulo si uno de tus rectángulos de vista se cruzan entre sí en algún punto, volverá verdadero luego recibirás notificar que la vista A fue arrastrada a la vista B aquí está mi código de ejemplo puede ser que lo hará ayudarte .
-(void)moveViewWithGestureRecognizer:(UIPanGestureRecognizer *)panGestureRecognizer{
// your current View touch location suppose View A
CGPoint touchLocation = [panGestureRecognizer locationInView:self.contentView];
CGRect movingAViewRect = CGRectMake(touchLocation.x, touchLocation.y, self.aView.width, self.aView.height);
// NSLog(@"Point not Matched first => %@ and second => %@",NSStringFromCGPoint(touchLocation),NSStringFromCGPoint(self.bView.frame.origins));
self.aView.center = touchLocation;
if(panGestureRecognizer.state == UIGestureRecognizerStateEnded)
{
//All fingers are lifted.
if(CGRectIntersectsRect(movingAViewRect,self.bView.frame)){
NSLog(@"Point Matched first => %@ and second => %@",NSStringFromCGRect(movingAViewRect),NSStringFromCGRect (self.bView.frame ));
// and here you can perform some action for this
}else{
NSLog(@"aView is not drag on bView please drag aView to bView ");
}
}
}
export default class Viewport extends Component{
constructor(props){
super(props);
this.state = {
showDraggable : true,
dropZoneValues : null,
pan : new Animated.ValueXY()
};
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder : () => true,
onPanResponderMove : Animated.event([null,{
dx : this.state.pan.x,
dy : this.state.pan.y
}]),
onPanResponderRelease : (e, gesture) => {
if(this.isDropZone(gesture)){
this.setState({
showDraggable : false
});
}else{
Animated.spring(
this.state.pan,
{toValue:{x:0,y:0}}
).start();
}
}
});
}
isDropZone(gesture){
var dz = this.state.dropZoneValues;
return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height;
}
setDropZoneValues(event){
this.setState({
dropZoneValues : event.nativeEvent.layout
});
}
render(){
return (
<View style={styles.mainContainer}>
<View
onLayout={this.setDropZoneValues.bind(this)}
style={styles.dropZone}>
<Text style={styles.text}>Drop me here!</Text>
</View>
{this.renderDraggable()}
</View>
);
}
renderDraggable(){
if(this.state.showDraggable){
return (
<View style={styles.draggableContainer}>
<Animated.View
{...this.panResponder.panHandlers}
style={[this.state.pan.getLayout(), styles.circle]}>
<Text style={styles.text}>Drag me!</Text>
</Animated.View>
</View>
);
}
}
}
fuente http://moduscreate.com/animated_drag_and_drop_with_react_native/