pc 实现拖拽功能

最新推荐文章于 2024-01-17 14:39:50 发布

雨住一_abc

最新推荐文章于 2024-01-17 14:39:50 发布

阅读量203

点赞数

文章标签： react.js javascript ecmascript 前端 html5

本文链接：https://blog.csdn.net/weixin_57033986/article/details/128346195

版权

安装组件
npm i react-sortable-hoc
npm i array-move

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

const Steps2: React.FC<IStepBoxProps> = ({changeCurrent}) => {
  const [form] = Form.useForm()
  const [list, setList] = useState<any[]>([
    { check: false, name: '姓名', disabled: true, value: '阿斯顿', key: 'user_name'},
    { check: false, name: '手机号', value: '13263879827', key: 'id_type'},
    { check: false, name: '身份证', value: '410221199210122139', key: 'id_card'}
  ])
  const [listC, setListC] = useState<any[]>()
  const SortableItem:any = SortableElement((item:any) => {
    return (
      <div className='check-list' style={{background: '#FFFFFF', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 10px', marginTop: '10px'}}>
        <Checkbox disabled={item.item.disabled} className='check-left' value={item.item.key}>{item.item.name}</Checkbox>
        <div className='check-right' style={{width: '16px', height: '16px', display: 'flex', alignItems: 'center'}}>
          <img style={{width: '100%', height: '100%'}} src={move} alt='' />
        </div>
      </div>

    )
  }

  )
  const SortableList:any = SortableContainer((items:any) => {
    return (
      <Form
        layout='vertical'
        form={form}
      >
        <Form.Item name='checkbox'>
          <Checkbox.Group style={{width: '100%'}} onChange={onFinish}>
            {items.items.map((item:any, index:number) => (
              <SortableItem key={index} index={index} item={item} />
            ))}
          </Checkbox.Group>
        </Form.Item>

      </Form>
    )
  })
  const onFinish = (values:any) => {
    const listC:any = []
    for (const item of list) {
      for (const item2 of values) {
        if (item.key === item2) {
          listC.push(item)
        }
      }
    }
    setListC(listC)
  }
  const onSortEnd = (e:any) => {
    const list2 = arrayMoveImmutable(list, e.oldIndex, e.newIndex)
    setList(list2)
  }
  return (
    <div className='Steps2'>
      <div className='body-steps'>
       	<SortableList items={list} onSortEnd={onSortEnd} />
      </div>    
    </div>

  )
}

export default Steps2