@ray-js/drag-list v1.1.1

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}`} style={{ width: 80, height: 80, background: 'blue' }} className={styles.dragImg} />
        </>
      );
    })}
  </Drag>
);