antd Upload组件添加拖拽功能

antd Upload组件添加拖拽功能

本次添加的只适合IE10及以上的,如果想要IE9这样的需要使用element.matches()

// 修改父组件传进来的图片列表
const {onChangeValue,canDrag,fileList} = props
const drop = (e: any, dropList: any[]) => {
	// react组件中调用这个api之后e里面的字段才能不是null
    e.persist()
    e.preventDefault()
    // 获取拖拽的id
    const data = e.dataTransfer.getData('Text')
    // 获取落点的id
    // 首先取到dom然后获取其父元素的dom,再获取其第一个子元素的id,这里的id使用的图片url
    const move = e.target.closest('div.drag-image-box').firstChild.id
    // 拖拽之后放回原先拖拽位置不执行操作
    if (data == move) {
      return
    }
    // 在图片组件中查找当前移动的什么列表
    let dataIndex = 0
    let moveIndex = 0
    const dropListUrl = dropList.map((item) => {
      return item.url
    })
    dropListUrl.forEach((item, index) => {
      if (item == data) {
        dataIndex = index
      } else if (item == move) {
        moveIndex = index
      }
    })
    const mid = dropListUrl[dataIndex]
    dropListUrl[dataIndex] = dropListUrl[moveIndex]
    dropListUrl[moveIndex] = mid
    // 修改父组件传进来的值
    onChangeValue?.(dropListUrl)
  }
  const dragover = (e: any) => {
    e.persist()
    e.preventDefault()
  }
  const dragStart = (e: any) => {
    e.persist()
    // 获取一下当前拖拽的图片是哪个,这里获取的是id
    e.dataTransfer.setData('Text', e.target.id)
  }

<Upload fileList={fileList}
        itemRender={(originNode, file, fileList, actions) => {
          return canDrag ? (
            <div
              className={'drag-image-box'}
              onDragOver={dragover}
              onDrop={(e) => {
                drop(e, fileList)
              }}
              style={{
                boxSizing: 'border-box',
                padding: '8px',
                border: '1px solid #d9d9d9',
                width: '100%',
                height: '100%',
              }}>
              <div className={'drag-img-content'} draggable='true' onDragStart={dragStart} id={file.url}>
                <Image src={file.url}></Image>
              </div>
            </div>
          ) : (
            <Image src={file.url}></Image>
          )
        }}>
</Upload>

结果: