如何在React本機中創建拖放操作？

Question

假設我有兩個視圖，A和B.我希望能夠在觸摸視圖A時觸發'dragAndDropStart'事件，然後啓用從A拖放到B ...在整個過程中向用戶顯示反饋即在視圖A和用戶的手指之間出現一條線）。在降（釋放拖動手勢）我想引發另一場「dragAndDropEnd」事件，這個時候就查看B.

的touchStart和touchEnd處理程序太有限，因爲它們不會出現以允許切換從一個視圖到另一個視圖的姿態。他們似乎也沒有啓用中間的「拖動」狀態。

關於使用手勢處理程序的React本機文檔有點神祕，我還沒有看到任何示例說明它們的用法。

任何想法？

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

源http://moduscreate.com/animated_drag_and_drop_with_react_native/

https://github.com/crysfel/DragAndDrop

Answer 2

您必須將當前視圖矩形視爲其他視圖矩形如果其中一個視圖矩形在某個點處相互相交，則它將返回true，那麼您將通知A視圖拖到B視圖這裏是我的示例代碼可能會幫助你。

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

 
     } 
 
     
 
     
 
     
 
     
 
    } 
 
}