question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to get `onDragStart` dataTransfer data on `onDropDragOver`

See original GitHub issue

How to do this? I tried:

const handleDragOver = (e) => {
    console.log({t: e.dataTransfer.getData("text"), d: e.dataTransfer.getData("text/plain")});
    return {w: 2, h: 5};
};

const DraggableContainer = (props) => (
    <div
        className="droppable-element btn btn-default"
        draggable
        unselectable="on"
        onDragStart={(e) => e.dataTransfer.setData("text/plain", "testing"))}>
        {props.children}
    </div>
);


But got an empty string when logging.

If I could get the target element that is been dropped over would be fine as well.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:6
  • Comments:6

github_iconTop GitHub Comments

1reaction
Duckicommented, Dec 9, 2021

I can confirm, that the dataTransfer object doesn’t get exposed. The culprit seems to be here, where DragEvent doesn’t get included in the type declaration: https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/utils.js#L51

In its current form, the new onDropDragOver handler is pretty useless without access to the actual dragEvent stuff.

0reactions
juny1zhangcommented, Oct 11, 2022

您好,我已收到您的邮件。我最近正在努力学习中-_-,无法及时回复你的邮件。我将在看到后,尽快给您回复。

Read more comments on GitHub >

github_iconTop Results From Across the Web

Breaking down barriers using the DataTransfer API - web.dev
Transferring data #. To get started, you'll need to implement drag-drop or copy-paste. The examples below show drag-drop interactions, but ...
Read more >
Pass card data on the onDrop property · Issue #1405 - GitHub
We have exactly this use case and implemented it using the drag handlers. On the card we are dragging, we set the drag...
Read more >
DataTransfer.setData() - Web APIs | MDN
The DataTransfer.setData() method sets the drag operation's drag data to the specified data and type. If data for the given type does not ......
Read more >
how to get data from DataTransfer.getData in event Dragover ...
1 Answer 1 · Read/write mode. For the dragstart event. New data can be added to the drag data store. · Read-only mode....
Read more >
ehome-react-grid-layout - npm
To make RGL responsive, use the <ResponsiveReactGridLayout> element: ... It is possible to supply default mappings via the data-grid ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found