Having trouble with dragging a file from one box to another in HTML5. The functionality is not working

Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events:

Before dragging the image: https://i.sstatic.net/C6JSM.png

After dragging the image, it fails to display: https://i.sstatic.net/7Du0c.png

The error reported on Chrome is as follows:

GET file:///C:/%22test Dropped angelo.js:42 leftbox.innerHTML=e.dataTransfer.getData('text');

Below is the HTML code snippet:

 <!doctype html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>angelos site</title>
   <link rel="stylesheet" href="main.css">
   <script src="angelo.js"></script>
</head>
<body>
   <section id="leftbox">
      i dare you to drop an image inme.
   </section>
   <section id="rightbox">
      <img id="facepic" src="C:\test\face.png">
   </section>
</body>
</html>

JavaScript function involved:

function doFirst(){

   mypic=document.getElementById('facepic');
   mypic.addEventListener("dragstart",startDrag,false);

   leftbox=document.getElementById('leftbox'); 
   leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);
   leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);
   leftbox.addEventListener("drop",dropped,false);

}

function startDrag(e){
   var code='<img src="C:\test\face.png">';
   e.dataTransfer.setData('Text',code);
}

CSS Style included:

#leftbox{
   float:left;
   width:250px;
   height:250px;
   margin:5px;
   border:3px solid blue;
}

#rightbox{
   float:left;
   width:250px;
   height:250px;
   margin:5px;
   border:3px solid green;
}

Answer №1

It appears to be functioning properly for me, although I am speculating on what your dropped method looks like in the jsfiddle provided: http://jsfiddle.net/rgthree/aVrB4/

Based on the information above, it seems that your JavaScript is likely correct. It is possible that your browser is having issues with local links. Consider using file:///c:/test/face.png for the src attributes of those images, or opt for relative paths instead.

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

Troubleshooting Media Queries in HTML, CSS, Bootstrap: Why Aren't They Applying as Expected?

I am still fairly new to web programming and just starting out with bootstrap. After creating a section of my page that worked well on larger screens, I realized it wasn't responsive enough on smaller devices. The height was set at 400px, causing hor ...

Integrating webpack with kafka-node for seamless communication between front

I am in the process of embedding a JavaScript code that I wrote into an HTML file. The script requires kafka-node to function properly, similar to the example provided on this link. To achieve this, I am using webpack to bundle everything together. I am fo ...

Two values are returned from the Node.js Mongoose Exports function

Currently, I am encountering an issue with my project where a service I developed is up and running. However, it is not providing the desired value as a response. Specifically, the goal is to generate coffee items linked to specific companies. Whenever new ...

Error: Child component received an undefined prop

Within my parent component, I have three child components. The first child component is a form that, upon submission, passes data to the second and third child components through props via the parent component. However, in one of the child components, the ...

I often find myself yearning for the good old days of prototyping functions when initializing a new

I just created a module in nodejs called Test.js with the following code: function Test() { this.key = 'value'; } Test.prototype.foo = function () { return 'foo'; } module.exports = Test; Then, in B.js file: var Test = require(&a ...

Toggle the element within the selected row using Jquery

In order to create a client list, users must click on rows to select them and then submit the selections to the database for a cron job to send out emails. Instead of using checkboxes, I am attempting to highlight rows by including two hidden elements - o ...

Vue Component Rendering Before Vuex Data is Ready

I am facing a challenge with my Vue2 component that depends on Vuex to fetch the currently selected node (infoNode) and display its data to the user. In my beforeCreate function, Axios is used to retrieve the top level nodes and set the 'infoNode&apos ...

Utilizing a Mocking/Spying Tool in Angular Unit Testing

I have a file named myHelpers.ts which contains multiple functions: myHelpers.ts export function multiply(a, b) { return a * b; } export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; } The above file al ...

Distinguishing each unique JavaScript property within an array of objects

I've been struggling with this problem for quite some time. I have an array of objects, focusing on the "00" object at the moment, and I am trying to group together the bestScore properties in a specific way: .. User Group apple .. User Group ba ...

Leveraging the power of a JavaScript framework within the script tag

Hello there! I'm just starting out with vue.js and exploring different JavaScript frameworks. Recently, I came across an interesting example based on the documentation. import modal from 'vue-semantic-modal' export default { components ...

Display a container using Fancybox

With just a click of a button, I want to reveal a hidden div in an elegant box. Here's the code snippet that actually works: $("#btnForm").fancybox({ content: $("#divForm").html() }); However, after doing some research, it appears that this may not ...

What is the best way to place text inside a TH element without any text within the TH's child nodes?

When parsing a website and obtaining the instance of a TH element, I use innerText to extract the text I need. However, sometimes there is additional unnecessary text that I want to exclude. Is there a way to only retrieve the top-level text? var th_elem ...

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

Is it possible for browser sync to replace a CSS file hosted on a CDN upon injection?

Trying to solve a dilemma with my Shopify theme. Working on my Shopify theme, I find it frustrating that I have to constantly save my CSS changes, switch tabs, and reload the browser to see updates. While I know about the theme gem, it doesn't provid ...

Display content exclusively in PDF format

On my HTML page, I have two sections - one for inputting values and the other for viewing a PDF. To ensure that the PDF view is hidden until explicitly requested, I need it to remain invisible by default. It should only appear as a PDF when someone clicks ...

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

Currently, I am utilizing Valum's Ajax File uploader for handling same-page file uploads. The issue I'm facing is that despite numerous attempts and variations in my script, I consistently receive "undefined" when trying to access responseJSON[&a ...

Having trouble integrating VueX store and router into Mocha tests

Latest Update To view the issue on VueX git repository that has been created, please follow this link: https://github.com/vuejs/vuex/issues/1509 If you want to replicate the problem, here is the link to the repository: https://github.com/djam90/vuex-vue- ...

Retrieve the value of [routerLinkActive] in the component's class

Recently, I've been working on a tab component called TabComponent and it includes the following HTML template: <a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a> <button>Close tab</button> The c ...

When you hover over one box, watch as another magically vanishes

How can I make one div disappear by hovering over another? When I use the code .icon:hover + .info { display:none), it just displays that div underneath instead of making it disappear. I'm not sure if the placement of the divs in the HTML is affectin ...