Wie kann ich eine Drag & Drop-Aktion in nativen Reagieren erstellen?

Question

Angenommen, ich habe zwei Ansichten, A und B. Ich möchte die Möglichkeit haben, ein "dragAndDropStart" -Ereignis durch Berühren von Ansicht A auszulösen und dann Drag & Drop von A nach B zu aktivieren ... Das heißt, es wird eine Linie angezeigt, die zwischen Ansicht A und dem Finger des Benutzers erscheint. Auf Tropfen (Loslassen die Ziehbewegung) ich eine andere ‚dragAndDropEnd‘ Veranstaltung, diesmal auf Ansicht B.

Der Berührungsstart und touchEnd Handler sind zu begrenzt, da sie nicht erscheinen ermöglichen Handoff auslösen soll der Geste von einer Ansicht zur anderen. Sie scheinen auch nicht den Zwischenzustand "Ziehen" zu ermöglichen.

Die React native docs bei der Verwendung der Gesten-Handler ist ein wenig kryptisch und ich habe keine Beispiele gesehen, die ihre Verwendung demonstrieren.

Irgendwelche Ideen?

Answer 1

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> 
      ); 
     } 
    } 
} 

Quelle http://moduscreate.com/animated_drag_and_drop_with_react_native/

https://github.com/crysfel/DragAndDrop

Answer 2

Sie müssen das aktuelle View Rectangle zu einer anderen Ansicht sehen Rectangle Wenn eines Ihrer View Rectanges sich überschneidet, wird True zurückgegeben, dann werden Sie benachrichtigt, dass die A Ansicht in B View gezogen wurde vielleicht wird es dir helfen.

-(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 "); 
 
      
 

 
     } 
 
     
 
     
 
     
 
     
 
    } 
 
}