jQuery UI droppable在IE和Firefox上不起作用（但在Chrome上有效）

Question

我的jQuery UI droppable在IE或Firefox上不起作用，但在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);          
  } );

为了稍微解释一下代码，我有2个对话框，每个对话框中都有一个图形。 我想做的就是将数据从一个图拖到另一个图。 （这就是为什么我的ui.position.left = 0;为什么我会ui.position.left = 0;说“我有数据”。）同样，它在Chrome上像ui.position.left = 0;一样工作，但仅在Chrome上如此。

Answer 1

有些测试后，它看起来像NVD3元素不能被jQuery的对 FF，IE和边缘跌落发现（我所用，使图形更容易库）。 真的不知道为什么，但是...

我所做的修复是将draggable和droppable draggable放置在对话框内容上，而不是NVD3图上，并且我阻止了不想拖动的事情。

像这样：

$("#" + 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

这种方式实际上有效，因为我将droppable放置对象放置在对话框内容而非图形上。 如果有人对此有解释，我将接受他的回答。 现在我接受我的。