2019.6 新增頂部固定功能，可以設(shè)置開始連續(xù)幾個(gè)為不可拖動(dòng)功能，類似今日頭條一樣，該功能和今日頭條拖拽一樣，可以去對(duì)比一下。
ezgif.com-resize.gif
2019.3: 新增單行拖拽演示，其實(shí)這個(gè)功能一致，這個(gè)拖拽插件本來(lái)就是自適應(yīng)行,有時(shí)間會(huì)整體優(yōu)化下ScrollView問(wèn)題，使控件自帶ScrollView功能。
one-line.gif
2019.2: 優(yōu)化拖拽不移動(dòng)時(shí)自動(dòng)恢復(fù)，現(xiàn)在這個(gè)插件應(yīng)該沒(méi)有任何問(wèn)題。新加一個(gè)實(shí)戰(zhàn)演示例子，后面有時(shí)間會(huì)對(duì)這個(gè)例子進(jìn)行加動(dòng)畫，刪除時(shí)item向下到待選的item動(dòng)畫，和待選到item。還有滑動(dòng)時(shí)自動(dòng)向下滑動(dòng)動(dòng)畫。
demo.gif
最近由于業(yè)務(wù)需求需要實(shí)現(xiàn)一個(gè)功能需要實(shí)現(xiàn)圖片的上傳和排序和刪除，在網(wǎng)上搜索了幾款發(fā)現(xiàn)都需要固定列數(shù)，感覺(jué)不太友好，所以自己實(shí)現(xiàn)了一個(gè)可以不需要設(shè)定列數(shù)的排序，而且布局高度實(shí)現(xiàn)自適應(yīng)。
源碼鏈接
效果圖對(duì)比(固定列數(shù)和自適應(yīng)流布局)
[圖片上傳中...(iphone.jpg-9f7224-1533711885416-0)]
iphone.jpg
動(dòng)態(tài)圖
olddemo.gif
實(shí)現(xiàn)
其實(shí)拖拽排序在大多數(shù)編程語(yǔ)言里已經(jīng)有很多中三方插件可以使用,實(shí)現(xiàn)方法都差不多，而且例如Android和iOS或者現(xiàn)在的React-Native他們邏輯幾乎是可以共用，你會(huì)寫一個(gè)語(yǔ)言的拖拽排序，其他的都差不多。
梳理一下步驟
- 開始觸發(fā)： 長(zhǎng)按或觸摸到達(dá)一定時(shí)間時(shí)觸發(fā)開始排序，這時(shí)可以進(jìn)行把被單機(jī)的item放大、透明、抖動(dòng)動(dòng)畫。
-
- 開始滑動(dòng)：
- (1) 被拖拽的item隨著手指的滑動(dòng)而滑動(dòng)
- (2) 被拖動(dòng)的item滑動(dòng)到第x個(gè)時(shí)，item到x之間的item進(jìn)行左滑右滑一個(gè)位置的動(dòng)畫。
-
- 松開手指：
- (1) 被拖拽的這個(gè)item通過(guò)四舍五入進(jìn)入相應(yīng)的位置。
- (2) 數(shù)據(jù)進(jìn)行替換并重繪加布局矯正。
tip: 滑動(dòng)邏輯，例如當(dāng)你把index=1拖到index=3，不是將1和3替換(0,3,2,1,4)，而是(0,3,1,2,4)這才是拖拽后結(jié)果，只將被拖拽的一個(gè)替換到要去的位置，其他的向前和向后移動(dòng)
主要代碼
// 觸摸事件的監(jiān)聽(tīng)
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => this.props.sortable,
onStartShouldSetPanResponderCapture: (evt, gestureState) => {
this.isMovePanResponder = false
return false
},
// 接管觸摸加滑動(dòng)事件
onMoveShouldSetPanResponder: (evt, gestureState) => this.isMovePanResponder,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => this.isMovePanResponder,
onPanResponderGrant: (evt, gestureState) => {},
onPanResponderMove: (evt, gestureState) => this.moveTouch(evt,gestureState),
onPanResponderRelease: (evt, gestureState) => this.endTouch(evt),
onPanResponderTerminationRequest: (evt, gestureState) => false,
onShouldBlockNativeResponder: (evt, gestureState) => false,
})
//這里使用長(zhǎng)按觸發(fā)開發(fā)拖拽事件，其實(shí)開始是使用觸摸一定時(shí)間后觸發(fā)事件的，但和View的單機(jī)事件有沖突不好解決，所以選擇了長(zhǎng)按觸發(fā)事件
startTouch(touchIndex) {
// 接管滑動(dòng)
this.isMovePanResponder = true
//if (this.measureTimeOut) clearTimeout(this.measureTimeOut)
if (sortRefs.has(touchIndex)) {
if (this.props.onDragStart) {
this.props.onDragStart(touchIndex)
}
//變大和加透明
Animated.timing(
this.state.dataSource[touchIndex].scaleValue,
{
toValue: maxScale,
duration: scaleDuration,
}
).start(()=>{
// 備份被觸摸的事件
this.touchCurItem = {
ref: sortRefs.get(touchIndex),
index: touchIndex,
// 記錄之前的位置
originLeft: this.state.dataSource[touchIndex].originLeft,
originTop: this.state.dataSource[touchIndex].originTop,
moveToIndex: touchIndex,
}
})
}
}
//滑動(dòng)
moveTouch (nativeEvent,gestureState) {
if (this.touchCurItem) {
let dx = gestureState.dx
let dy = gestureState.dy
const rowNum = parseInt(this.props.parentWidth/this.itemWidth);
const maxWidth = this.props.parentWidth-this.itemWidth
const maxHeight = this.itemHeight*Math.ceil(this.state.dataSource.length/rowNum) - this.itemHeight
//出界后取最大或最小值防止出界
if (this.touchCurItem.originLeft + dx < 0) {
dx = -this.touchCurItem.originLeft
} else if (this.touchCurItem.originLeft + dx > maxWidth) {
dx = maxWidth - this.touchCurItem.originLeft
}
if (this.touchCurItem.originTop + dy < 0) {
dy = -this.touchCurItem.originTop
} else if (this.touchCurItem.originTop + dy > maxHeight) {
dy = maxHeight - this.touchCurItem.originTop
}
let left = this.touchCurItem.originLeft + dx
let top = this.touchCurItem.originTop + dy
//置于最上層
this.touchCurItem.ref.setNativeProps({
style: {
zIndex: touchZIndex,
}
})
//滑動(dòng)時(shí)刷新布局，這里直接刷新Animated的數(shù)字就可以進(jìn)行局部刷新了
this.state.dataSource[this.touchCurItem.index].position.setValue({
x: left,
y: top,
})
let moveToIndex = 0
let moveXNum = dx/this.itemWidth
let moveYNum = dy/this.itemHeight
if (moveXNum > 0) {
moveXNum = parseInt(moveXNum+0.5)
} else if (moveXNum < 0) {
moveXNum = parseInt(moveXNum-0.5)
}
if (moveYNum > 0) {
moveYNum = parseInt(moveYNum+0.5)
} else if (moveYNum < 0) {
moveYNum = parseInt(moveYNum-0.5)
}
moveToIndex = this.touchCurItem.index+moveXNum+moveYNum*rowNum
if (moveToIndex > this.state.dataSource.length-1) moveToIndex = this.state.dataSource.length-1
// 其他item向左和向右滑動(dòng)
if (this.touchCurItem.moveToIndex != moveToIndex ) {
this.touchCurItem.moveToIndex = moveToIndex
this.state.dataSource.forEach((item,index)=>{
let nextItem = null
if (index > this.touchCurItem.index && index <= moveToIndex) {
nextItem = this.state.dataSource[index-1]
} else if (index >= moveToIndex && index < this.touchCurItem.index) {
nextItem = this.state.dataSource[index+1]
} else if (index != this.touchCurItem.index &&
(item.position.x._value != item.originLeft ||
item.position.y._value != item.originTop)) {
nextItem = this.state.dataSource[index]
//有時(shí)前一個(gè)或者后一個(gè)數(shù)據(jù)有個(gè)動(dòng)畫差的原因無(wú)法回到正確位置，這里進(jìn)行矯正
} else if ((this.touchCurItem.index-moveToIndex > 0 && moveToIndex == index+1) ||
(this.touchCurItem.index-moveToIndex < 0 && moveToIndex == index-1)) {
nextItem = this.state.dataSource[index]
}
//需要滑動(dòng)的就進(jìn)行滑動(dòng)動(dòng)畫
if (nextItem != null) {
Animated.timing(
item.position,
{
toValue: {x: parseInt(nextItem.originLeft+0.5),y: parseInt(nextItem.originTop+0.5)},
duration: slideDuration,
easing: Easing.out(Easing.quad),
}
).start()
}
})
}
}
}
//觸摸事件
endTouch (nativeEvent) {
//clear
if (this.measureTimeOut) clearTimeout(this.measureTimeOut)
if (this.touchCurItem) {
if (this.props.onDragEnd) {
this.props.onDragEnd(this.touchCurItem.index,this.touchCurItem.moveToIndex)
}
//this.state.dataSource[this.touchCurItem.index].scaleValue.setValue(1)
Animated.timing(
this.state.dataSource[this.touchCurItem.index].scaleValue,
{
toValue: 1,
duration: scaleDuration,
}
).start()
this.touchCurItem.ref.setNativeProps({
style: {
zIndex: defaultZIndex,
}
})
this.changePosition(this.touchCurItem.index,this.touchCurItem.moveToIndex)
this.touchCurItem = null
}
}
//刷新數(shù)據(jù)
changePosition(startIndex,endIndex) {
if (startIndex == endIndex) {
const curItem = this.state.dataSource[startIndex]
this.state.dataSource[startIndex].position.setValue({
x: parseInt(curItem.originLeft+0.5),
y: parseInt(curItem.originTop+0.5),
})
return;
}
let isCommon = true
if (startIndex > endIndex) {
isCommon = false
let tempIndex = startIndex
startIndex = endIndex
endIndex = tempIndex
}
const newDataSource = [...this.state.dataSource].map((item,index)=>{
let newIndex = null
if (isCommon) {
if (endIndex > index && index >= startIndex) {
newIndex = index+1
} else if (endIndex == index) {
newIndex = startIndex
}
} else {
if (endIndex >= index && index > startIndex) {
newIndex = index-1
} else if (startIndex == index) {
newIndex = endIndex
}
}
if (newIndex != null) {
const newItem = {...this.state.dataSource[newIndex]}
newItem.originLeft = item.originLeft
newItem.originTop = item.originTop
newItem.position = new Animated.ValueXY({
x: parseInt(item.originLeft+0.5),
y: parseInt(item.originTop+0.5),
})
item = newItem
}
return item
})
this.setState({
dataSource: newDataSource
},()=>{
if (this.props.onDataChange) {
this.props.onDataChange(this.getOriginalData())
}
//防止RN不繪制開頭和結(jié)尾
const startItem = this.state.dataSource[startIndex]
this.state.dataSource[startIndex].position.setValue({
x: parseInt(startItem.originLeft+0.5),
y: parseInt(startItem.originTop+0.5),
})
const endItem = this.state.dataSource[endIndex]
this.state.dataSource[endIndex].position.setValue({
x: parseInt(endItem.originLeft+0.5),
y: parseInt(endItem.originTop+0.5),
})
})
}
