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

Navigating to a particular div using a click event

React throwing error: Context value is undefined

What is the behavior of a variable when it is assigned an object?

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

Observing the element with a directive

Interacting with a Web API using JavaScript following successful authentication with Azure AD B2C

Is it possible to identify when an element has scrolled out of view just one time?

The data list is failing to retain previous elements as new ones are incorporated

Using Sweet Alert to enhance the user confirmation experience on your website

An object-c alternative to encodeURIComponent

Mocha: A Unique Perspective on Testing the express.Router Instance

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

Can someone explain why the min-width property is not being respected by the <input> element?

Angular Partial Submit/Procession

Retrieving information within a Vue component

Clear the cache in Angular to remove the page

When accessing a page from a link, JavaScript sometimes does not immediately execute on the first attempt

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Having trouble with document.getElementById.innerHTML not displaying the correct content?

How can Components access variables declared in a custom Vue.js plugin?