相互排他的なドラッグ/ドロップグラフイベント

Question

ハイハターグラフを含むShinyアプリがあります。グラフは散布図であり、ドラッグ可能でクリック可能な点があります。ドラッグに関連するアクションは、理論上、クリックに関連するアクションと相互に排他的でなければなりません。

しかし実際には、ポイントのドラッグ時にクリックアクションが発生することがあります。マウスボタンを放してドラッグ操作が完了するまでクリックすることができないようにするだけで、ドラッグしないでドラッグするだけでドラッグするだけで、このアプリでは相互に排他的である必要があります。私のフルコードでは、イベントのタイプに応じて異なるJavaScriptアクションがShinyサーバーに返されます。一緒に発砲する両方のイベントが問題を引き起こしています。

解決策には、各イベントに関連付けられたJavaScriptアクションを追加することが必要と思われます。私のJavaScriptスキルは、これらの調整が何であるかを知るのに十分ではありません。この質問のいくつかの異なる変形を見つけても、潜在的な解決策は変わりませんでした。私が見つけた最も近いディスカッションはHighchartsのコンテキストhereですが、解決策はマスターのHighchart/draggable-events JSファイルと関係があります。

提案？あなたがアクションで、この動作を見ることができるおもちゃ例えば

：

rm(list=ls()) 
library(highcharter) 
library(shiny) 


ui <- fluidPage(
    highchartOutput("hcontainer") 
) 


# MUTUAL EXCLUSIVITY: 
# if you drag in the plot, you should either drag (and get no alert) OR 
# get an alert (and the point shouldn't/won't move), but never both. 

server <- function(input, output, session) { 
    output$hcontainer <- renderHighchart({ 
     hc <- highchart() %>% 
      hc_chart(animation = FALSE) %>% 
      hc_title(text = "draggable points demo") %>% 
      hc_plotOptions(
       series = list(
        point = list(
         events = list(
          drop = JS("function(){ /* # do nothing, for demo */ 
             }" 
          ), 
          click = JS("function(){ 
           alert('You clicked') /* # give alert, for demo */ 
           }" 
          ) 
         ) 
        ), 
        stickyTracking = FALSE 
       ), 
       column = list(
        stacking = "normal" 
       ), 
       line = list(
        cursor = "ns-resize" 
       ) 
      ) %>% 
      hc_tooltip(yDecimals = 2) %>% 
      hc_add_series(
       type = "scatter", 
       data = stars, 
       draggableY = TRUE, 
       draggableX = TRUE, 
       hcaes(x = absmag, y=radiussun) 
      ) 
     hc 
    }) 
} 

shinyApp(ui = ui, server = server) 

Answer 1

この例であなたを助けることがあります。http://jsfiddle.net/kkulig/th37vnv5/

私は、クリックアクションを発射することを防止するコア機能にフラグを追加しました右ドラッグイベント後：

var dragHappened; 

(function(H) { 
    var addEvent = H.addEvent; 

    H.Pointer.prototype.setDOMEvents = function() { 

    var pointer = this, 
     container = pointer.chart.container, 
     ownerDoc = container.ownerDocument; 

    container.onmousedown = function(e) { 
     dragHappened = false; 
     pointer.onContainerMouseDown(e); 
    }; 
    container.onmousemove = function(e) { 
     pointer.onContainerMouseMove(e); 
    }; 
    container.onclick = function(e) { 
     if (!dragHappened) { 
     pointer.onContainerClick(e); 
     } 
    }; 

    (...) 
    }; // setDOMEvents 

})(Highcharts); 

(...) 
    plotOptions: { 
    series: { 
     point: { 
     events: { 
      drag: function() { 
      console.log('drag'); 
      dragHappened = true; 
      }, 
      click: function() { 
      console.log('click'); 
      } 
     } 
     } 
    } 
    },