当前位置：首页 > news >正文

taro h5列表拖拽排序 --- sortablejs 和 react-sortable-hoc

news 2025/8/6 14:53:03

描述：列表，拖拽排序，只测试了h5

一、sortablejs

文档：http://www.sortablejs.com/

1.安装sortablejs
2、引入

import Sortable from 'sortablejs'

3、页面

const [list, setList] = useState([{id: 'item-1',content: '选项1'
}, {id: 'item-2',content: '选项2'
}, {id: 'item-3',content: '选项3'
}])const getListRef = (instance) => {new Sortable(instance, {animation: 150,ghostClass: '自定义的类名',});
}return (<View ref={getListRef}>{list.map((item, index) => {return (<View key={`item-${index}`}>{ item.content }</View>)})}</View>
)

！！！注意：
ghostClass控制的不时拖动中的影子，而是拖动的最终落在目标位置的item
在这里插入图片描述
4、item中有Switch的bug

解决方法：在switch外套个容器，设置宽高和switch一致，超出隐藏

另外，拖动中的重影没有直接的属性去除，还没有找到好的方法…

二、react-sortable-hoc

文档：https://www.npmjs.com/package/react-sortable-hoc
中文文档：https://www.5axxw.com/wiki/content/hrpw3t
1、安装 react-sortable-hoc和array-move
2、引入

import { arrayMoveImmutable } from 'array-move'
import { SortableContainer, SortableElement } from 'react-sortable-hoc'

3、单个item

const SortableItem = SortableElement(({value}) => {return (<View className="tab-item"><Image src='' className="logo" />{value.label}</View>)
})

4、列表

const SortableList = SortableContainer(({items, onSortEnd}) => {return (<View className="tab-list">{items.map((value, index) => (<SortableItem key={`tab-item-${index}`} index={index} value={value} />))}</View>)
})

5、页面

const [items, setItems] = useState([{label: '选项1',checked: true}, {label: '选项2',checked: false}])useEffect(() => {// 这里可以监听到itemsconsole.log(items)}, [items])const onSortEnd = ({oldIndex, newIndex}) => {setItems(arrayMoveImmutable(items, oldIndex, newIndex))};return (<SortableList items={items} onSortEnd={onSortEnd} />)

.tab-item {display: flex;align-items: center;padding: 10px;margin-bottom: 20px;color: #fff;background: #ccc;.logo {margin-right: 10px;width: 50px;height: 50px;background: yellow;}
}

!!!注意点
设置样式的时候，tab-item要单独设置，不要嵌套在其他元素下，否则会出现鼠标按下和拖动时，元素样式消失
在这里插入图片描述

常用的属性： （加在SortableList上）
pressDelay：number, 按下之后多少毫秒可以排序，不能与distance同用
Distance: number, 按下之后鼠标移动多少像素可以拖动元素
Helpclass: string , 按下去的元素的样式名称
hideSortableGhost：bolean, 拖动时是否隐藏重影，默认时隐藏的

默认只要按下就会在body上插入一个item, 可以用pressDelay 或distance控制时间
在这里插入图片描述