react--实现拖拽功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react--实现拖拽功能相关的知识，希望对你有一定的参考价值。
参考技术A 需求说明当点击编辑按钮后，进入可拖拽状态，可将筛选条件的位置进行调整
使用遮罩避免触发搜索框
收集所有的筛选项，绑定拖拽事件
筛选项交换后记录位置到本地
下次render前根据保持的位置信息做调整
遇到的问题：
直接使用domApi做交换处理，打乱了react的树结构，会报错。这里通过key值强制react重新生成dom结构
React-Native ListView拖拽交换Item
在高仿“掘金”客户端的那个项目中，你会发现在打开和关闭“首页展示标签”中，我并没有实现可拖拽换位item的效果。不过在自己新写的Gank.io项目中，将这一功能实现了一把，在此记录一下。先上效果图
对，就是这样～
在实现这个效果前，我的思路是这样的，布局->item可点击突出显示->可移动item->可交换item->抬起手指恢复正确的位置。下面一一解释。
布局
忘了说了，由于这个界面的item的元素较少，并且为了方便起见，我并没有采用ListView控件去实现这个list，而是使用数组map返回一个个itemView。
render(){
return(
<View style={styles.container}>
<NavigationBar
title="首页内容展示顺序"
isBackBtnOnLeft={true}
leftBtnIcon="arrow-back"
leftBtnPress={this._handleBack.bind(this)}
/>
{this.names.map((item, i)=>{
return (
<View
{...this._panResponder.panHandlers}
ref={(ref) => this.items[i] = ref}
key={i}
style={[styles.item, {top: (i+1)*49}]}>
<Icon name="ios-menu" size={px2dp(25)} color="#ccc"/>
<Text style={styles.itemTitle}>{item}</Text>
</View>
);
})}
</View>
);
}前面NavigationBar部分不用看，自己封装的组件，通过map函数，可以依次遍历每个数组元素(this.names = ['Android','iOS','前端','拓展资源','休息视频'];)。因为我们需要后面能直接控制每个DOM（后面会直接操控它的样式），所以需要添加ref属性，不熟悉或者不明白ref这个prop的，可以参考 这里。还需要注意的地方是，因为我们的item是可以拖拽移动的，能直接操控它们位置属性的就是 绝对和 相对布局，提供了top，left，right，bottom这些个props。贴一下item的stylesheet。
item: {
flexDirection: 'row',
height: px2dp(49),
width: theme.screenWidth,
alignItems: 'center',
backgroundColor: '#fff',
paddingLeft: px2dp(20),
borderBottomColor: theme.segment.color,
borderBottomWidth: theme.segment.width,
position: 'absolute',
},不用在意其他的props，最关键的最起作用的就是position属性，一旦设置，该View的位置就不会受控于flexbox的布局了，直接浮动受控于top，left这几个参数。对于{...this._panResponder.panHandlers} 这个属性，就会谈到react-native中的手势，也就是我们下一个内容。