JQuery addClass not working in Firefox

Question

I have seen many post about this but none of them bring me a solution;

I have implemented a drag and drop functionality in my site. When I drag above a valid container I add a class to it.

The html for the container;

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

Now when ondragover event is triggered it calls for this JavaScript

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

And the css class;

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

Its working in every browser but not for firefox!?

Any clues?

Try this: `var id = ev.target.id;` – Rayon Feb 11 '16 at 05:17 — Rayon, Feb 11 '16 at 05:17
Fixed it. Thank you Sir. – MadeInDreams Feb 11 '16 at 05:22 — MadeInDreams, Feb 11 '16 at 05:22
"every browser" - being IE, Edge, and now Chrome ... – Jaromanda X Feb 11 '16 at 05:54 — Jaromanda X, Feb 11 '16 at 05:54

score 1 · Answer 1 · answered Feb 11 '16 at 06:14

You could try something like this:

$(document).ready(function () {
 var obj = $('.boxL');

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

.boxL { 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="boxL">

JQuery addClass not working in Firefox

1 Answers1