When an external image is dragged over, include the class in the drop area of the file input

Question

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area?

Here's the HTML code I'm working with:

<div class="upload">
   <form action="">
      <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
      <div class="circle"><i class="flaticon-arrows-1"></i></div>
      <div class="text">Drag and Drop or browse from your computer</div>
   </form>
</div>

I would like to add a class to the upload div so it looks like this:

<div class="upload dragging"></div>

javascript jquery html css drag-and-drop

Answer 1

Answer №1

To achieve this functionality using JavaScript, you need to "listen" for the dragover event.

var target = document.querySelector('.target');

target.addEventListener("dragover", function( event ) {
  this.classList.add('dragging');
}, false);

target.addEventListener("drop", function( event ) {
  this.classList.remove('dragging');
}, false);

.dragging {
  border:1px solid green;  
}

<div class="target">
  <form action="">
    <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
    <div class="circle"><i class="flaticon-arrows-1"></i></div>
    <div class="text">Drag and Drop or browse from your computer</div>
  </form>
</div>

Answer 2

To achieve this functionality using JavaScript, you need to "listen" for the dragover event.

var target = document.querySelector('.target');

target.addEventListener("dragover", function( event ) {
  this.classList.add('dragging');
}, false);

target.addEventListener("drop", function( event ) {
  this.classList.remove('dragging');
}, false);

.dragging {
  border:1px solid green;  
}

<div class="target">
  <form action="">
    <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
    <div class="circle"><i class="flaticon-arrows-1"></i></div>
    <div class="text">Drag and Drop or browse from your computer</div>
  </form>
</div>

Answer 3

Answer №2

If you want to eliminate the dragging class once you exit the drag area, simply include this snippet in Mosh Feu's code:

upload.addEventListener("dragleave", function( event ) {
    this.classList.remove('dragging');
}, false);

Answer 4

If you want to eliminate the dragging class once you exit the drag area, simply include this snippet in Mosh Feu's code:

upload.addEventListener("dragleave", function( event ) {
    this.classList.remove('dragging');
}, false);

When an external image is dragged over, include the class in the drop area of the file input

Answer №1

Answer №2

Similar questions

jquery submit is not functioning as expected

Move divs that are currently not visible on the screen to a new position using CSS animations

Building a WCF Rest Service for Sending Large Files to ASP.NET MVC: A Step-by-Step Guide

AngularJS checkbox validation requires a minimum of two checkboxes to be selected

Learn the process of obtaining a location and showcasing it on Google Maps

Positioning a DIV in the center within Bootstrap columns

Displaying a div when hovering over it, and keeping it visible until clicked

How to retrieve client's hostname using Node and Express

Disable the mousedown event in JavaScript/jQuery

Tips for programmatically choosing dropdown menus in Angular 5

sending multiple checkbox selections to a PHP script using jQuery

What is the best way to expand the width of a table cell in a React + Material project?

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

What is the technique for arranging the display of a component in React?

Issues with displaying Base64 images in Fancybox2 on Internet Explorer

What is the best way to incorporate variables into the useState hook in React?

Adjust the template within a directive to dynamically include an additional directive

Generating radio buttons dynamically and automatically selecting the correct button using AngularJS

Steps for executing a Node script are as follows:

Struggling to eliminate the underlines from an HTML hyperlink