Missing ghost image appears when you drag and drop the file

New to JavaScript...

As a rookie in coding, I often get interesting requests from my partner who is a kindergarten teacher. Recently, she asked me to create a "Function Machine" for her classroom activities. With some trial and error, I managed to put together the necessary JavaScript code to make it functional with drag and drop capabilities. However, I encountered an issue while implementing the drag feature - the ghost image of the dragged item disappears midway through. I suspect the problem lies in how I'm fetching data attributes with JS during the drag event.

Is there anyone here who can suggest a workaround to display the ghost image correctly?

Check out the CodePen demo: Function Machine

HTML


    <!-- HTML markup goes here -->

CSS:


    /* CSS styles go here */

JS


    // JavaScript functions and actions go here
javascriptcss

Answer №1

This problem was challenging, but I managed to solve it.

let originalTarget = event.target.cloneNode(true);
    originalTarget.style.backgroundColor = "purple";

    originalTarget.style.transform = "translateX(-5000px)"; /* alternatively, you can use visibility: hidden or other CSS properties */
    document.body.appendChild(originalTarget);
    event.dataTransfer.setDragImage(originalTarget, 0, 0);

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

Exploring IP geolocation integration within Rails 3

I am looking to add a dynamic feature to my homepage that will display the location object closest to the reader's physical location. Currently, I have a Location model with longitude and latitude fields. My goal is to retrieve the location model obj ...

javascriptajaxruby-on-rails-3htmlgeolocation

Hey there! I'm currently facing some difficulties with storing form input data into a nested json file

I have developed a Next.js application with a form component structured as follows: components/Form.js import { useState } from 'react' import { useRouter } from 'next/router' import { mutate } from 'swr' const Form = ({ for ...

javascriptnode.jsreactjsjsonnext.js

What is the process for setting up a resthook trigger in Zapier?

I'm currently integrating Zapier into my Angular application, but I'm struggling with setting up a REST hook trigger in Zapier and using that URL within my app. I need to be able to call the REST hook URL every time a new customer is created and ...

javascriptangularzapierzapier-cli

The space residing above my primary container division

I recently finished creating a basic web app, but I'm encountering an issue with the smallest media query where there is an unwanted top gap. Despite trying multiple methods and researching solutions online, I have not been able to resolve this proble ...

htmlcssresponsive-design

How do you trim a string and display the final 3 characters?

When dealing with a list of objects, I want to ensure that the chain of tasks does not become too long and break the table or appear aesthetically unpleasing. Therefore, my goal is to trim the tasks and display only the last 3. In the image below, multiple ...

javascriptvue.jsvuejs2

Proper Placement of Required Field Validator Messages

I am having an issue with the validation text appearing behind my textbox instead of below it. Despite setting the display to block in the CSS class for the assignment type and start date, the validation text is not displaying properly. I have tried variou ...

c#htmlasp.netcss

Use CSS to target elements with IDs that have been generated randomly

Unfamiliar with the specific IDs, this markup presents a challenge: #product-20625055 { background-color: #FC0; } #product-66980342 { background-color: #0CF; } #product-54722210 { background-color: #F0C; } <div class="product" id="product-20625055"&g ...

htmlcsscss-selectors

AngularJS Perspectives: Unveiling the Secrets of Successful Implementation

Do you have any tips on troubleshooting AngularJS views? I found a demo at AngularJS: ngView, but the provided jsfiddle doesn't seem to work. I've been trying to play around with it, but still haven't had any success. This is the code I&apo ...

javascriptweb-applicationsangularjs

The issue in Vue JS arises when trying to access JSON key values from an object array using v-for

I am currently working on parsing a list of objects found within a JSON payload into a table utilizing Vue.js. My goal is to extract the keys from the initial object in the array and use them as headings for the table. While the code I have in place succe ...

javascriptjsonvuejs2

Is it possible to interact with Java SE jars using JavaScript?

I need to integrate an API that is written in Java with a Client written in JavaScript. Is there any way to use this API, possibly along with other Java-SE JARs, in Webstorm? Any assistance would be greatly appreciated. Thank you! ...

javascriptjavajar

Text positioned on the right side of the image, appearing to hover above

After finding a helpful example on Stack Overflow, I successfully implemented a similar layout for product boxes in a JSFiddle. I then replicated the CSS and HTML almost exactly on my Wordpress blog, but encountered an issue where the title, description, a ...

htmlcsswordpresscss-float

Automatic Refresh and Search Functionality on PHP Page

Can anyone help with a problem I'm having trying to implement auto-reload on a page with a table in the form of rows that contain usernames? I am currently using the jQuery searchable plugin from here to search for usernames within the div. The websi ...

javascriptjquery

Ways to remove the initial row of inline-block divs

My webpage is filled with inline-block divs that are contained within a larger div like so: <div class="container"> <div class="text">Text 1</div> <div class="text">Text 2 ... rest of the nu ...

javascripthtmlcss

Experience the magic of CSS Sprite once it's been successfully uploaded!

Visit the website for testing here Located at the bottom of the page are two images with hover effects - one labeled "Contact us" and the other "Jobs Available!" During local testing, these images are visible. However, once uploaded to a server, they dis ...

htmlcssftpcss-sprites

Transferring information from a service to an AngularJS controller

I have a service that retrieves data from a URL provided as a parameter, and it is functioning correctly. However, when attempting to pass this data to a controller's $scope in AngularJS, I am not receiving any data. var app = angular.module("Recib ...

javascriptangularjs

Adjusting the repeating-linear-gradient CSS background

My goal is to make adjustments to a specific CSS code, in this case it is the repeating-linear-gradient. Take a look at my current implementation: input[type="range"]::-moz-range-track { background: repeating-linear-gradient(to right, #ccc, # ...

csslinear-gradients

Switch between selecting every group of 3 items and every group of 4 items

Having an array with more than 14 items, I need to group them into 2 different groups in this specific way: The first 3 (#1,2,3) will be in array A, the next 4 (#4,5,6,7) will be in array B, the following 3 (#8,9,10) will be in array A, the subsequent 4 (# ...

phpjavascriptjquerynode.js

React - callbackFromApp function is executing only one time when clicked

Whenever I click a button within my child React module, it is meant to increment the timer and then pass back the timer in minutes and total seconds to the parent component where it will be stored as state. The issue I am facing is that when I click the b ...

javascriptreactjs

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

I am having an issue with the bottom border starting from the extreme left of the page. I want it to start from the letter "T" in Tech instead. #page-container { width: 1250px; margin: 0 auto; } h2 { font-weight: normal; padding-left: 15px; ...

htmlcss

Guide to integrating Google Maps JS API into a React application without relying on third-party libraries

I'm currently grappling with the concept of integrating external APIs in React and am interested in using Google Maps' API to showcase a map within a child component. My goal is to gain insight into how this can be done without relying on any ext ...

javascriptajaxgoogle-mapsreactjsgoogle-maps-api-3