drag and drop działa tylko w firefox

mam funkcje:

function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text/plain");
      var temp = document.getElementById(data);
      
      console.log("data:"+data);
      console.log("temp:"+temp);

w firefoxie nie mam błedów:

data:firstPart
temp:[object HTMLDivElement]
data:secondPart
temp:[object HTMLDivElement]

za to w chrome mam takie dane:

data:
temp:null
data:
temp:null

Czy to jest wina ustawień przeglądarek?
Czy da się to jakoś poprawić czy inaczej muszę skonstruować te drag n drop...

Robię dla dzieci zabawę w naukę dodawania:
http://tablica.fun/sprawdzian-z-dodawania/
u nas mamy firefoxa, ale jakbym chciał z kimś się podzielić to mnie to trochę irytuje.

Wrzuć jeszcze fragment, gdzie używasz ev.dataTransfer.setData, oraz jakieś podpięcie eventów pod dragstart, dragover itd żeby można było powiedzieć coś więcej.

elementFirst.addEventListener("dragstart", function(event) {
      drag(event)
    }, false);
    
    //
    elementFirst.addEventListener('ondragover', function(event) {
      allowDrop(event)
    }, false);
    
    //
    elementSecond.addEventListener("dragstart", function(event) {
      drag(event)
    }, false);
    
    //
    elementSecond.addEventListener('ondragover', function(event) {
      allowDrop(event)
    }, false);
    
    //
    elementBin.addEventListener("dragleave", function(event) {
      drop(event)
    }, false);
    
    elementBin.addEventListener('ondragover', function(event) {
      allowDrop(event)
    }, false);
    
    function allowDrop(ev) {
      ev.preventDefault();
    }
    
    function drag(ev) {
      ev.dataTransfer.setData("text/plain", ev.target.id);
    }

https://stackoverflow.com/questions/9534677/html5-drag-and-drop-getdata-only-works-on-drop-event-in-chrome

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

Nigdy nie musiałem korzystać z tych eventów ręcznie, zawsze była do tego jakaś gotowa biblioteka, ale z tego co znalazłem to chrome zezwala jedynie na odczyt danych przez getData w evencie drop.

Super działa!

Przerobiłem te eventy tak i działa na firefox i chrom, dałes mi energi i checi bo juz sie poddawałem.

    var data;
    var temp;
    
    elementFirst.addEventListener("dragstart", function(event) {
      event.dataTransfer.setData("text/plain", event.target.id);
      data = event.dataTransfer.getData("text/plain");
      temp = document.getElementById(data);
      console.log("data:"+data);
      console.log("temp:"+temp);
    }, false);
    
    //
    elementFirst.addEventListener('ondragover', function(event) {
      allowDrop(event)
    }, false);
    
    //
    elementSecond.addEventListener("dragstart", function(event) {
      event.dataTransfer.setData("text/plain", event.target.id);
      data = event.dataTransfer.getData("text/plain");
      temp = document.getElementById(data);
      console.log("data:"+data);
      console.log("temp:"+temp);
    }, false);
    
    //
    /*elementSecond.addEventListener('ondragover', function(event) {
      allowDrop(event)
    }, false);*/
    
    //dragleave
    elementBin.addEventListener("dragleave", function(event) {
      if(
        (parseInt(elementFirst.textContent)+parseInt(elementSecond.textContent)+parseInt(elementFixed.textContent)
        -parseInt(temp.textContent))==parseInt(elementSum.textContent)) 
        {
          elementSum.style.backgroundColor = "lime";
          elementFirst.style.backgroundColor = "lime";
          elementSecond.style.backgroundColor = "lime";
          elementFixed.style.backgroundColor = "lime";
          elementEquals.textContent = "=";
          document.getElementById("container").classList.remove('container');
          document.getElementById("container").classList.add('containerWithout'+data);
          document.getElementById(data).remove();
        }
    }, false);
    
    elementBin.addEventListener('ondragover', function(event) {
      allowDrop(event)
    }, false);
    
    function allowDrop(ev) {
      ev.preventDefault();
    }