1.1.0 • Published 5 months ago
@ray-js/drag-list v1.1.0
English | 简体中文
@ray-js/drag-list
拖拽排序列表
Installation
$ npm install @ray-js/drag-list
# or
$ yarn add @ray-js/drag-list
Usage
import React, { useEffect, useState } from 'react';
import Drag from '@ray-js/drag-list';
export default () => (
const [sensorList, setSensorList] = useState([
{
devId: 1,
name: '设备1',
checked: false,
},
{
devId: 2,
name: '设备2',
checked: false,
}
]);
const handleSortEnd = data => {
console.log(data);
};
<Drag
list={sensorList}
handleSortEnd={handleSortEnd}
keyId="devId"
theme={{
background: 'var(--card-bg)',
}}
>
{sensorList.map((item, i) => {
return (
<>
{/* Sort content items, slot names are fixed */}
<View key={item.devId} className={styles.dataItem} slot={`dataItem${i}`}>
<View className={styles.icon} />
<View className={styles.msg}>
<Text className={styles.name}>{item.name}</Text>
</View>
</View>
{/* Sort icon, slot name fixed */}
<View slot={`drag${i}`} className={styles.dragImg} />
</>
);
})}
</Drag>
);
1.1.0
5 months ago