Dragging a React <div> using useRef

As a beginner in React, I decided to challenge myself by recreating a classic game like 'space invader'. It seemed like a fun and simple project for someone at my skill level.

My goal is to have a spaceship at the bottom of the screen that can shoot laser beams at the aliens above!

However, I'm struggling with using useRef() to manipulate the position of the spaceship. I've been attempting to access the 'left' or 'right' properties of the associated style class, but I've hit a roadblock.

Oddly enough, I can modify the background color or width of the spaceship, but I can't seem to adjust the 'left' or 'right' properties to move it around.

Check out my humble attempt at the project here:

https://codesandbox.io/s/condescending-bose-ehn4f?file=/src/index.js

cssreactjsuse-ref

Answer №1

The issue lies within the CSS styling. To successfully utilize the left and right properties, you must ensure that a position property is defined as either absolute, relative, or fixed. By incorporating these, you will be able to achieve the desired outcome.

When employing position absolute, it is imperative that the container has a position relative in order for the left, top, right, and bottom properties to function within the scope of the element with the relative position.

Alternatively, by utilizing position relative, the left, right, bottom, and top attributes will adapt relative to their specified position.

Furthermore, if you opt for a fixed position, these properties will be in relation to the entire page, ensuring the element remains in place even during scrolling. This appears to be the most optimal solution in this scenario.

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

Choose an option from a Material UI Listbox with Autocomplete feature using Cypress

This specific element is crucial for the functionality of the application. <input aria-invalid="false" autocomplete="off" placeholder="Category" type="text" class="MuiOutlinedInput-input MuiInputBase-input ...

reactjsmaterial-uiautocompletecypresslistboxitem

Transmitting information through socket.emit from the client to the server

I'm facing an issue while trying to send numeric data from the client to the server using socket.emit. The problem is that the server doesn't seem to be receiving any data, as only `null` gets logged or I might be doing something wrong in my appr ...

javascriptreactjssocket.io

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss

Bootstrap for Twitter: How to Customize Text in the Navigation Bar

As per the twitter bootstrap guidelines, I am supposed to enclose text in a <p> tag for correct leading and color. However, when I try to do this within the navbar element or any of its sub-levels, the text does not inherit any of the styling propert ...

htmlcsstwitter-bootstrap

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

Currently, I am using the open source project openhtmltopdf but I have encountered a certain issue. Within a div-element, I have a p-tag with text-align: right styling. The text is aligned correctly to the right until there is a line break due to the widt ...

htmlcssopenhtmltopdf

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

NextJS Error: React children must be able to be used as objects

Recently, I've been exploring ReactJS with a focus on NextJS. While working on a NextJS application, I encountered an error related to a component utilizing a custom hook. "use client"; import FormText from "@/components/Form/formtext&q ...

reactjsnext.js

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

Airbnb PropTypes Array React Linter

My PropTypes look like this: SmartTable.propTypes = { name: React.PropTypes.string.isRequired, cols: React.PropTypes.array.isRequired, rows: React.PropTypes.array.isRequired, }; However, I am getting a linting error that says: The prop type "array" ...

reactjsreact-proptypeslintereslint-config-airbnb

Unable to view image when using material-ui CardMedia component

Hello, I've encountered a problem with rendering an image in my application. Let me explain the issue in a simplified manner. So, I have a card component (MyCardComponent) where I need to pass a string prop containing the image file location. The goa ...

javascriptcssreactjsmaterial-ui

The HookState Module, specifically the "@hookstate/core" module, does not have a declared export for the function "useState"

Encountering a problem here - everything was working fine as usual, but today I'm getting the following error when trying to build: Module '"@hookstate/core"' has no exported member 'useState'. I am using NextJS. View image here f ...

reactjsnext.jshookstate

My Gatsby website is being rendered in its HTML form on Netlify

The website build is located at . It appears that the javascript functionality is not working, and only the html version (usually meant for search engines) is being displayed. It seems like this issue is only affecting the home page. You can check out the ...

javascriptreactjsgatsbynetlify

What could be the reason for the individual components not being populated within the listItem?

*** I am iterating through an array and calling the ListItem component for each item. However, only one ListItem is being populated when there should be 3. Can someone please help me figure out what's wrong? *** Here is my code in App.js *** import F ...

javascriptcssreactjs

Attempting to decipher the @media queries CSS code responsible for the slider on this particular website

I'm having trouble with the cover not fully expanding when the browser size is less than 750. I am new to using bootstrap. For reference, I am looking at this website: CSS .slide-wrapper { position: relative; } /* Not using now .carousel-caption ...

cssruby-on-railstwitter-bootstrap-3

What is the Redux Toolkit equivalent of setting fetch's { credentials: "include" } in createApi?

In my project, I am utilizing an express-react-typescript-redux-passport setup where I'm making use of createApi from Redux Toolkit to make a call to a /getuser API on the backend. The authentication process involves the use of the passport-google-oa ...

reactjsexpresspassport.jsrtk-query

"Receiving error message claiming no recipients are defined, despite the fact that my entered email address is

I recently followed a tutorial on implementing email functionality using Node.js, React.js, Nodemailer, and OAuth2. You can find the tutorial here. Despite entering the user's email correctly and confirming it with console logs in both the server and ...

node.jsreactjsexpressnodemailer

Modifying the State in a Class Component

private readonly maxSizeOfDownloadedFiles: number = 1000000; state = { totalSum: this.maxSizeOfDownloadedFiles }; handleCallback = () => { this.setState({ totalSum: 12 }) alert('totalSum ' + this.state.totalSum); }; Upon executing the ...

reactjstypescript

Initial Year Setting for MUI X datepicker

For a project I am working on with my client, they have requested that the datepicker in MUI X default to the year 2023. They would like the datepicker to automatically display the year 2023 with the option for them to change it if needed, as most of the d ...

javascriptreactjsmaterial-uimui-xmui-x-date-picker

Organizing product categories in React

Can anyone assist me in sorting an array with currencies in a React application? I am currently rendering a list of products, each containing a price block. The data structure consists of an array of products, with each product having a subarray of prices ...

reactjsarraysfilter

Ways to extend the waiting timeout from 30000 ms to 60000 ms for npm installation on Ubuntu

Due to the slow internet connection, I was unable to install packages from npm. The issue arose when npm returned an error stating: npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/create-react-app (over 30000ms) I thought tha ...

node.jsreactjsnpmcreate-react-appnpm-install