如何在React本地创build拖放操作？

假设我有两个视图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 "); } } }