Issue with JQuery addClass functionality in Firefox

Question

Issue with JQuery addClass functionality in Firefox

I've come across numerous posts on this topic, but none of them have provided a solution.

I recently added drag and drop functionality to my website. When I drag an item over a valid container, I add a specific class to it.

Here is the HTML for the container:

<div id="boxL" class="boxL" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">

When the ondragover event is triggered, it executes the following JavaScript:

function allowDrop(ev) {
    ev.preventDefault();
    var id = event.target.id;
       $(document).ready(function(e){ 
       $('#'+id).addClass('dotted');
    });
}

And here is the CSS class being used:

.dotted{
  border: 5px dotted #212121;  
}

This setup works perfectly in all browsers except for Firefox. Any ideas on how to fix this?

javascript jquery html css

Answer 1

Answer №1

Here is a possible solution to achieve the desired outcome:

$(document).ready(function () {
var element = $('.targetElement');

element.on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).addClass('dragenter');
});
element.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
element.on('drop', function (e) {
e.preventDefault();
$(this).addClass('drop');
});
$(document).on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
element.removeClass('dragenter');
});
$(document).on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
});
});

.targetElement { width:100px; height:100px; background-color:#bababa; border:5px solid #333}
.dragenter{border: 5px dotted #212121;  }
.drop{border: 5px dotted red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="targetElement">

Answer 2

Here is a possible solution to achieve the desired outcome:

$(document).ready(function () {
var element = $('.targetElement');

element.on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).addClass('dragenter');
});
element.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
element.on('drop', function (e) {
e.preventDefault();
$(this).addClass('drop');
});
$(document).on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
element.removeClass('dragenter');
});
$(document).on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
});
});

.targetElement { width:100px; height:100px; background-color:#bababa; border:5px solid #333}
.dragenter{border: 5px dotted #212121;  }
.drop{border: 5px dotted red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="targetElement">

Issue with JQuery addClass functionality in Firefox

Answer №1

Similar questions

The Next JS build process is failing to generate certain paths

Issue with Axios Get method: Data not displaying in table

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Position the icon to the left side of the button using Bootstrap

Failure to append an object to the array occurs when submitting an HTML form

How can you identify the resume of a web application once you return from opening the camera?

In Javascript, swap out a particular colored region in an image with a different image

Tips for incorporating external libraries into a Grafana data source plugin

MUI: Autocomplete cannot accept the provided value as it is invalid. There are no matching options for the input `""`

"Enhance your website with captivating Javascript hover effects for

AngularJS Custom Navigation based on User Roles

What is the best way to send a parameter to a mousewheel event?

Retrieve the names contained within TD elements using the console

The navigation bar on the web app is functioning properly on Android devices but experiencing a CSS problem on

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

Searching within a container using jQuery's `find` method can sometimes cause jQuery to lose control

What can be done to prevent Leaflet from processing markers that fall outside of its bounding box?

The functionality to show/hide based on the selected value upon loading is malfunctioning

Issue found in React Js test - TypeError: source.on does not exist as a function

Misunderstanding the Variable Scope Concept in Node.js