把onDragEnd的逻辑 移到 onDrop 里?

[vaynevayne]

业务需要支持拖到 table 外隐藏该列, 因此会有两个 drop 容器,处理两种逻辑
目前,因为onDrapend是绑定在 drag 元素,所以只支持一个容器,

2. 另外希望 onDragStart 时希望可以抛出该事件,以便我用 useState 来记录拖动的列,

// 现在是使用这种 dom 的方式, 感觉不是很靠谱
table?.querySelector('th[draggable=true]')

目前这种用法效果还行, 但是会报错

 <div
        onDragOver={(e) => {
          e.preventDefault()
        }}
        onDrop={(event) => {
          // prevent default action (open as link for some elements)
          event.preventDefault()
          console.log('onDrop', event)
          if (!event.target.className.includes('ant-table')) {
            console.log('table 外')
            // antd table 里寻找 drapable = true 的元素
            const table = document.querySelector('.ant-table')
            const drag = table?.querySelector('th[draggable=true]')
            console.log('drag', drag)

            const hideTitle = drag?.getAttribute('aria-label')
            const hideField = COLUMNS.find((item) => item.title === hideTitle)?.dataIndex
            console.log('columnsState', config.columnsState)

            if (hideField && !Array.isArray(hideField)) {
              setConfig((draft) => {
                draft['columnsState'][hideField].visible = false
              })
            }
          }
        }}
      >
<Table />
<div>