Drag events and e.dataTransfer

[richcorbs]

I'm trying to implement a simple drag and drop feature and I'm sure I'm missing something simple. I understand that e.dataTransfer, once set as part of a drag event, should be available in the subsequent drag events (dragenter, dragover, dragleave, etc). I can see that dataTransfer is being set as expected in the dragStart handler. But the event that arrives at the dragEnter handler doesn't have the same dataTransfer value. Any ideas what I might be missing?

  const DragAndDrop = () => {
    return div({ class: 'container mx-auto p-4' },
      div({ class: 'h-screen w-full flex items-center justify-center' },
        () => div({ class: 'flex gap-8' },
          columns.map((column, cIndex) => div(
            {
              class: 'box h-30 w-30 border-4 border-gray-300 flex items-center gap-2 justify-center',
              ondragenter: (e) => dragEnter(cIndex, e),
              ondragover: (e) => dragOver(cIndex, e),
              ondragleave: (e) => dragLeave(e),
              ondragend: (e) => dragDrop(e),
            },
            column.items.map((_, iIndex) => div({ id: 'doof', class: 'h-8 w-8 bg-yellow', draggable: true, ondragstart: (e) => dragStart(cIndex, iIndex, e) })),
          ))
        )
      )
    )
  }

[richcorbs]

e.dataTransfer was present in the drop handler. I just hadn't gotten that far when I asked the question.