• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

204
Views
How to disable dataTransfer onDrag in a react component?

I have an draggable div in a react app. When I enable dragging by using draggable={true}, I see a ghost image is created and it follows the mouse movement. I just wanted to get rid of it.

My actual component is the first one. The ghost image is the second one.

enter image description here

When I looked up for it, I found this stackoverflow solution. Implemented the following code snippet, and it cleared the old ghost.

let img = new Image();
img.src = empty; // this is just an empty png file

const onDragStartHandler = (event) => {
    event.dataTransfer.setDragImage(img,0,0)
    // ...
}

However, now I see a different animation for a fraction of a second at the very beginning of the drag operation. How can I remove that? Or is there a way to completely disable the dataTrasfer? Tried event.dataTransfer.clearData() but it did not worked out.

enter image description here

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error