|
|
@@ -42,6 +42,16 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
|
|
|
}, [])
|
|
|
|
|
|
+ function touchStart(e, index) {
|
|
|
+ setChangedIndex(index)
|
|
|
+ setStartOffsetY(index*props.itemHeight)
|
|
|
+ setStartPageY(e.touches[0].pageY)
|
|
|
+ setDragIndex(index)
|
|
|
+ setDragElement(list[index])
|
|
|
+ setMovaleViewY(index*props.itemHeight)
|
|
|
+ setCanScroll(false)
|
|
|
+ }
|
|
|
+
|
|
|
function longPress(e, index) {
|
|
|
alert('long press')
|
|
|
setChangedIndex(index)
|
|
|
@@ -55,9 +65,10 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
|
|
|
function touchMove(e) {
|
|
|
if (dragElement) {
|
|
|
- let clientY = e.touches[0].clientY;
|
|
|
+
|
|
|
+ let clientY = e.nativeEvent.locationY;
|
|
|
pageScroll(clientY);
|
|
|
- let pageY = e.touches[0].pageY;
|
|
|
+ let pageY = e.nativeEvent.pageY;
|
|
|
let targetMoveDistance = pageY - startPageY
|
|
|
let movaleViewY2 = startOffsetY + targetMoveDistance
|
|
|
|
|
|
@@ -182,13 +193,15 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
return -1; // 上滑
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
return <View id="myScrollView" ref={ref} style={{ height: '100%', overflow: canScroll ? 'scroll' : 'hidden' }} catchMove>
|
|
|
<MovableArea style={{ height: list.length * props.itemHeight, width: rpxToPx(750) }}>
|
|
|
<View>
|
|
|
{
|
|
|
list.map((item, index) => {
|
|
|
- return <View key={index} style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight, width: rpxToPx(750),backgroundColor:'pink' }}
|
|
|
- onLongPress={(e) => longPress(e, index)}
|
|
|
+ return <View key={index} style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight, width: rpxToPx(750) }}
|
|
|
+ // onLongPress={(e) => longPress(e, index)}
|
|
|
+ onTouchStart={(e) => touchStart(e, index)}
|
|
|
onTouchMove={(e) => touchMove(e)}
|
|
|
onTouchEnd={(e) => touchEnd(e)}
|
|
|
>
|
|
|
@@ -199,7 +212,7 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
width: '100%',
|
|
|
alignItems: 'center', justifyContent: 'space-between'
|
|
|
}}>
|
|
|
- <Text style={{ color: props.color,fontSize:rpxToPx(32) }}>{item.name}</Text>
|
|
|
+ <Text style={{ color: props.color, fontSize: rpxToPx(32) }}>{item.name}</Text>
|
|
|
<IconDrag width={17} height={12} />
|
|
|
|
|
|
</View>
|
|
|
@@ -208,11 +221,21 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
</View>
|
|
|
})
|
|
|
}
|
|
|
+ <View style={{position:'absolute',left:0,width:rpxToPx(750),top:movaleViewY,height: changedIndex >= 0 ? props.itemHeight : 0}}>
|
|
|
+ <View className='drag_item' style={{ backgroundColor: props.color }}>
|
|
|
+ {
|
|
|
+ dragIndex >= 0 && <View className='modal_sel_item' style={{ height: 40, border: 'none' }}>
|
|
|
+ <Text style={{ color: 'black', fontWeight: 'bold' }}>{list[changedIndex].name}</Text>
|
|
|
+ <IconDrag width={17} height={12} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
|
|
|
- <MovableView style={{ height: changedIndex >= 0 ? props.itemHeight : 0, width: rpxToPx(750),backgroundColor:'red' }}
|
|
|
+ {/* <MovableView style={{ height: changedIndex >= 0 ? props.itemHeight : 0, width: rpxToPx(750),backgroundColor:'red' }}
|
|
|
direction='vertical'
|
|
|
disabled
|
|
|
- animation={false}
|
|
|
+ animation={true}
|
|
|
y={movaleViewY}
|
|
|
>
|
|
|
<View className='drag_item' style={{ backgroundColor: props.color }}>
|
|
|
@@ -223,7 +246,7 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
</View>
|
|
|
}
|
|
|
</View>
|
|
|
- </MovableView>
|
|
|
+ </MovableView> */}
|
|
|
</View>
|
|
|
</MovableArea>
|
|
|
</View>
|