jQuery UI droppable doesn't work on IE and Firefox (but does on Chrome)

Question

My jQuery UI droppable doesn't work on IE or Firefox, but does on Chrome.

    function drawNVDGraph(targetElement, data, type) {
    nv.addGraph(function () {

       // here I make some graph this works        

            $("#NVDGraph" + targetElement).draggable();
    $("#NVDGraph" + targetElement).draggable("option", "cursor","url(smiley.jpg), cell");    
        //drag works fine I can see the cursor change


  $("#NVDGraph" + targetElement).on( "drag", function( event, ui ) {
          // here I just block the graph so it doesn't move       
     ui.position.left = 0;
      ui.position.right = 0;
          ui.position.top = 0;
      ui.position.bottom = 0;
     //masterSVG = data;


  } );



   $("#NVDGraph" + targetElement).on( "drop", function( event, ui ) {
         // this doesn't work on FF or IE or EDGE the drop isn't even detected
      console.log("hello");

            var data1 = sinAndCos();            
            var data2 = sinAndCos2();


       var data3 =  data1.concat(data2);
       drawNVDGraph(targetElement, data3, type); 

     console.log(data3);          
  } );

To explain the code a bit, I have 2 dialog boxes that both have a graph inside. What I want to do is drag the data from one graph to the other. (That's why I have ui.position.left = 0; and I show a smiley to say "I have the data".) Again, it works like a charm on Chrome but only on Chrome.

Answer 1

After a bit of testing, it looks like NVD3 (the library I was using to make graphs easier) elements can't be found by jQuery for the drop on FF, IE, and Edge. Don't really know why but...

What I did to fix it is put the draggable and droppable on the dialog content NOT the NVD3 graph, and I prevented things I didn't want to drag from dragging.

Like this:

$("#" + id ).draggable();     // make the content of my dialog box draggable

        $("#" + id ).draggable({
        cancel: ".nv-context",     // that's a part I don't want to drag
        });

$("#" + id ).droppable();    // make the content of my dialog box droppable

This way it actually works, because I put the droppable on the dialog content not the graph. If somebody has an explanation for why this is, I will accept his answer. For now I accept mine.