How can I create a drag and drop action in React native?

Question

Say I have two Views, A and B. I want to have the ability to trigger a 'dragAndDropStart' event on touching View A and then enable a drag and drop from A to B... displaying feedback to the user throughout (i.e. showing a line appearing between View A and the user's finger). On drop (releasing the drag gesture) I want to trigger another 'dragAndDropEnd' event, this time on View B.

enter image description here

The touchStart and touchEnd handlers are too limited as they don't appear to permit handoff of the gesture from one View to another. They also don't seem to enable the in-between 'drag' state.

The React native docs on using the gesture handlers is a little cryptic and I haven't seen any examples that demonstrate their use.

Any ideas?

I don't know if you made this diagram specifically for this post, but it's awesome. — Joshua Pinter, Mar 02 '17 at 13:34
Thanks Josh, diagrams are something I love even more than code! — Pete Thorne, Mar 06 '17 at 11:47

score 16 · Accepted Answer · edited Sep 21 '22 at 15:33

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

source https://moduscreate.com/blog/drag-and-drop-react-native/

https://github.com/crysfel/DragAndDrop

this looks very promising, I have broken my code whilst trying to update it to the latest React Native version, but once I can test again I will confirm this solution, thanks — Pete Thorne, Jan 29 '16 at 15:21
Ok I have verified the code you linked to and I'm happy to say that drag and drop works. thanks — Pete Thorne, Apr 05 '16 at 13:28
read https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes this is also the wrong place to ask. — Harry Moreno, May 03 '17 at 14:41

score -8 · Answer 2 · answered May 27 '15 at 08:35

you have to see the current View Rectangle to other view Rectangle if one of your view rectangle intersect each other at some point it will return true then you get notify that the A view was drag to B view here is my example code may be it will help you .

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

        }
      
        
     
       
    }
}

yes please try if you need sample of xcode project i'll also provide you link — Abhay Singh Naurang, Jan 07 '16 at 09:30

How can I create a drag and drop action in React native?

2 Answers2