Firing drag enter event many times in Firefox

Question

I have a problem with drag enter event on Firefox, The browser is firing this event multiple times when the mouse is still moving on the dropping area.

when the dragged item is enter the dropping area, The event will fired for the first time, also when the mouse is entering the text "Dropping area" the event will be fired for the second time knowing that the mouse is still in the dropping area.

$(document).ready(function(){

     $(".draggable").on("dragstart",function(event){
      event.originalEvent.dataTransfer.setData("Text","data");
      console.log("start");
     });

     $(".droppable").on("dragenter",function(event){
      event.preventDefault();
      console.log("enter");
     }); 
});

This is the HTML code :

    <div  class="widthBorders draggable" draggable="true">
        Draggable Item
    </div>
    <br/><br/>
    <div class="widthBorders droppable">
        <br/><br/>Dropping area
    </div>

This is a full example: jsfiddle example

Answer 1

Finally I get this answer :

var elements = $();
$(".droppable").on("dragenter",function(event){
    event.preventDefault();
    if(event.relatedTarget.nodeType == 3) return;
    if(event.target === event.relatedTarget) return;
    elements = elements.add(event.target);
    if(elements.length == 1) {
        //This code will be executed for once.
        console.log("enter");
    }
});