How can I conceal a ghosting image during a drag event in ReactJS?

I am currently utilizing the onDrag method in React JS. My goal is to enable dragging while moving the image, without displaying the ghost image. I attempted using CSS "-webkit-user-drag:none", but it ended up completely disabling the drag functionality. I am looking for a way to have both functionalities work simultaneously.

Here is an example of the code:

<img
                    style={{ left: `${pixels}px` }}
                    onDrag={this.dragOn.bind('start')}
                    onDragEnd={this.dragOn.bind(this, 'end')}
                    alt=""
                    height="20"
                    width="15"
                    draggable="true"
javascripthtmlcssreactjs

Answer №1

To start off, begin by generating a tiny transparent image within the componentDidMount method:

componentDidMount() {
  this.transparentImg = new Image(0,0);
  this.transparentImg.src =
  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
}

Next, in your onDragStart event handler:

handleOnDragStart = e => {
  e.dataTransfer.setDragImage(this.transparentImg, 0, 0);
}

Remember to utilize the setDragImage method specifically within the onDragStart event handler. It is not compatible with the onDrag method.

Answer №2

If you refer to the documentation on the html5 drag-and-drop standard found at: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragfeedback

You will discover how to modify the appearance of the translucent image that appears beneath the cursor. You have the option to change it to a more subtle image (or canvas) or even to a blank image using new Image()

event.dataTransfer.setDragImage(new Image(), 0, 0);

However, I would caution against utilizing a blank image as some form of visual indication is necessary for the drag-and-drop operation.

Answer №3

In order to prevent confusion and bugs, it is important to include the CSS property user-select: none; for the entire drag and drop area. This will disable the default text selection behavior which can mistakenly make text draggable instead of the intended elements like images or divs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React: What sets createMuiTheme apart from createTheme?

Does the title specify that both functions accept the same type of ThemeOptions object? const theme = createMuiTheme({ palette: { primary: { main: "#006400" }, secondary: { main: "#ffa500" } } }); const ...

reactjsmaterial-uithemes

I am interested in learning more about the process of hosting and uploading a complete website that includes server configuration, React development, and MySQL integration

After completing my first full project using server, client, and data, I am eager to learn more about hosting and uploading a complete website that includes server-side code (Node.js + Express), MySql database, and a React app. I understand the process of ...

mysqlnode.jsreactjsuploadhosting

redux store is not synchronized with the state retrieved from redux logger using store().getState()

Dealing with the redux store in an SSR react app has been a challenge for me. Initially, everything was working smoothly - the initialState was created on the server and received by window.initialState on the client side. However, issues arose when I tried ...

javascriptreactjsreduxserver-side-rendering

Discover the steps for unsubscribing from window.cookieStore.addEventListener('change') while using an Angular service

My current project is utilizing Angular version 15.2.10. In order to monitor cookie changes, I have developed an Angular service that taps into the CookieStore API. Below you can find a snippet of my existing code: type CookieChangeType = { name: strin ...

javascriptangulartypescriptsubscriptioncookiestore

Is there a method to run a bash script from a webpage and capture the output in real-time?

I have a situation where I am running lengthy bash scripts on my Ubuntu 10.04 Server for tasks like backups and database dumps. Right now, I am scheduling them through cron and having the results emailed to me. However, I would like the option to manually ...

phpjavascriptajaxbashshell

Tips for returning a response to a client [ReactJS] from a server following the successful processing of a Stripe payment

I'm struggling to grasp the concept of stripe documentation, can someone please help me... Once a transaction with stripe is successfully completed, such as this one: const authorizePurchase = async (req, res, next) => { const session = await str ...

reactjsnode.jssessionstripe-payments

Error 404 encountered when attempting to send a JSON object to the server

I've been facing a problem while trying to send a JSON object to the server using AJAX calls. I keep getting a 404 Bad Request error. The issue seems to be related to the fact that I have a form where I convert the form data into a JSON object, but th ...

javascriptjavaangularjsajaxcontroller

What is the best way to prevent input fields from wrapping onto a new line in a Bootstrap 4 inline form layout?

I am facing an issue with my inline form where the input fields are wider than the screen, causing some of them to fall onto a new line. <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="u ...

cssbootstrap-4

I'm attempting to create an HTML document using the Shruti font (Gujarati Unicode), but instead of displaying correctly, it is showing strange, random symbols

Attempting to create an HTML file utilizing the Shruti font (Gujarati Unicode), but encountering random symbols instead. I have experimented with various methods, including the mpdf library, without success in importing the Shruti font. ...

htmlcssunicodebootstrap-4

Create a hyperlink to the tabbed navigation menu

I want to create links to the tabbed menu for my website. The homepage has 4 categories: car, van, truck, and special, each of which leads to the portfolio page. The portfolio page includes a simple filtered tabbed menu structured like this: <ul id="f ...

phphtmlcssurltabs

The function Map() in React-Leaflet cannot be executed, despite the presence of data

I am attempting to replicate the React-Leaflet example of a list of markers. I have an array of objects that I am passing to MarkerList to be transformed into Fragments and displayed on the map. However, my mapping function is not functioning as expected ...

javascriptreactjsreact-leaflet

Share a callback function with child components via props

My child container defines Ownprops like this: export interface OwnProps { prop1: string; prop2: "callback function" } I want to pass a callback function from the parent to this child in order to trigger a parent function from the child. However ...

reactjstypescript

Is it possible to utilize varying attributes for a singular component by implementing Styled Components in React JS?

One scenario where I may need to use border for a component, while in other instances border-bottom is desired. What is the best way to accomplish this? Furthermore, could someone explain the significance of the following code snippet in styled component ...

reactjsstyled-components

Enhancing User Input in React with Material Design Components

I am currently working on implementing an input field that completes a link and directs the user to it. However, when I click on the button, the page opens but there is an 'undefined' displayed at the end, as if the input field was not properly u ...

reactjsmaterial-ui

Error message: Uncaught TypeError - Unable to access property value from null reference in Quicksort.js

Can someone assist me in resolving the "uncaught typeerror cannot read property of null" issue I'm facing on line 4 of my JavaScript code? This is my first post on this platform and I hope to find some help here! function sort() { var array = docume ...

javascripthtmlquicksort

I am encountering a problem specifically with Chrome when it comes to the following block of JS code. This code works perfectly in Firefox, but in Chrome it displays the original size of the

Here is a snippet of JavaScript code that seems to be functioning well in Firefox but encountering issues in Chrome: let mainImg = document.getElementById('big_image'); let smallImgs = document.getElementById('small_image').getElements ...

javascriptpythonflaskbootstrap-4

When using @msal-browser's loginPopup() function, make sure to include the 'client_secret' input parameter in the request

I'm currently in the process of obtaining the authorization token to configure an online Microsoft Teams meeting. When I click on continue, it prompts a login popup window and then displays the following error: The provided request must include a &ap ...

reactjsms-access-2010azure-ad-msalmsal-react

Refreshing an actively loaded script

Currently, I am dynamically loading the mathJax javascript library from their CDN in order to apply it to an HTML partial page that is also being loaded simultaneously. The issue I am facing is that while the scripts load initially, they do not reload whe ...

javascriptjqueryangularjsdommathjax

JQuery - Real-time computation and transformation within an interactive spreadsheet

I have a dynamic HTML table where rows can be added, and I am looking to read the value in Liters and convert it to US Gallons as the user enters the values. I want to take the input in Liters, convert it, and display it in the USG input field. View Dynam ...

javascripthtmljquery

Confirming the authenticity of a newly added user input with the help of jQuery

Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...

jqueryhtmlcssvalidation