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);          
  } );

为了解释一下代码，我有两个对话框，里面都有一个图形。我想要做的是将数据从一个图表拖到另一个图表。（这就是为什么我ui.position.left = 0;并且我表现出一个笑脸来说＆＃34;我有数据＆＃34;。）同样，它在Chrome上就像魅力一样，但只在Chrome上运行。

Answer 1

经过一些测试后，看起来像NVD3（我用来简化图表的库）元素无法通过jQuery 找到FF，IE和Edge上的drop 。不知道为什么，但......

我所做的是将draggable和droppable放在对话框内容而不是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放在对话框内容而不是图形上。如果有人解释为什么会这样，我会接受他的回答。现在我接受我的。

jQuery UI droppable不能在IE和Firefox上运行（但在Chrome上运行）

1 个答案: