skip to Main Content

I have a problem with the onDragEnter/onDragLeave events in react on an antd table.

For information, I use antd and react 18.

     /**
       * 
       * @param e 
       */
      function handleDragEnter(e: DragEvent<HTMLDivElement>) {
        console.log('e:', e)
        e.preventDefault()
        e.stopPropagation()
        setDragged(true)
      }
    
    
      /**
       * 
       * @param e 
       */
      function handleDragLeave(e: DragEvent<HTMLDivElement>) {
        console.log('e:', e)
        e.preventDefault()
        e.stopPropagation()
        setDragged(false)
      }

    return (
      <>
        <div className="DrivesList" onDrop={handleDrop} onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
          <Table
            className={classNames({
              'DrivesList-table-loading': droppedFilesLoading,
            })}

....
     

As you can see in the following screenshot, events are triggered many times when I drag over the board :

console when I drag the hover table

For information, if I comment the table (still the main div), these events work perfectly.

Any ideas ?

Thanks in advance.

PS:I want to add a border around the div when I drag over it.

2

Answers


  1. Chosen as BEST ANSWER

    Solved using pointer-events: none in child.


  2. Your problem is related to your children inside a <div ...> ... </div> where you hanle onDragEnter and onDragLeave.
    run in codesandbox

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search