React native'de nasıl sürükleyip bırakma eylemi oluşturabilirim?

Question

İki Görünümüm var, A ve B Görünüm A'ya dokunarak bir 'dragAndDropStart' olayını tetikleme yeteneğine sahip olmak ve ardından A'dan B'ye sürükle ve bırak özelliğini etkinleştirmek istiyorum… örn., Görünüm A ve kullanıcının parmağı arasında görünen bir çizgi gösteriliyor). damla, ben başka bir 'dragAndDropEnd' olayı tetiklemek istiyorum B Görünümü bu sefer (sürükleme hareketini bırakmadan)

touchStart ve touchEnd işleyicileri çok onlar yayınım izin görünmüyor olarak sınırlıdır

bir bakıştan diğerine hareketi. Ayrıca, "sürükle" durumu arasında geçiş yapmazlar.

Yerleşik dokümanlar, hareket tanıtıcılarını kullanma konusunda biraz şifreli ve kullanımlarını gösteren hiçbir örnek görmedim.

Herhangi bir fikrin var mı?

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

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

 
     } 
 
     
 
     
 
     
 
     
 
    } 
 
} 
 

kaynak http://moduscreate.com/animated_drag_and_drop_with_react_native/

https://github.com/crysfel/DragAndDrop

Answer 2

Geçerli Görünüm Dikdörtgeni diğer görünüme görmelisiniz. Dikdörtgeninizden biri birbiriyle kesişiyorsa dikdörtgeni döndürür, sonra A görünümünün B'ye sürüklendiğini bildirirsiniz. olabilir size yardımcı olacaktır.