Jak zapobiec przeciągnięciu przez d3 po kliknięciu prawym przyciskiem myszy?

Question

Mam zdefiniowane pewne zachowanie przeciągania, który działa zgodnie z oczekiwaniami w następujący sposób (kod w coffeescript):

nodeDrag = d3.behavior.drag() 
    .on("dragstart", (d, i) -> 
    force.stop()) 
    .on("drag", (d, i) -> 
    d.px += d3.event.dx 
    d.py += d3.event.dy 
    d.x += d3.event.dx 
    d.y += d3.event.dy 
    tick()) 
    .on("dragend", (d, i) -> 
    force.resume() 
    d.fixed = true 
    tick()) 

// ... 

nodes = vis.selectAll(".node") 
    .data(graph.nodes) 
    .enter() 
    .append("g") 
    // ... 
    .call(nodeDrag) 

ja teraz staram się tworzyć niestandardowe zachowanie dla prawych kliknięć na węzłach. Jednak powoduje to "dragstart" i "przeciąganie", tj. Po wywołaniu e.preventDefault() w przypadku zdarzenia "contextmenu", węzeł, o którym mowa, jest przyklejony do wskaźnika myszy i podąża za nim, dopóki nie wykonam kolejnego (lewego) kliknięcia, aby wymusić zwolnienie (Zakładam, że e.preventDefault() powoduje również "dragend", aby nigdy nie strzelać).

Znalazłem krótkie omówienie tego problemu w thread on Google Groups i discussion in d3's issues on Github. Jednak nie mogę zrozumieć tych komentarzy, jak zapobiec temu zjawisku.

Jak nie można uruchomić przeciągania po kliknięciu prawym przyciskiem myszy?

Answer 1

Znalazłem możliwość ograniczenia gestów przeciągania tylko do lewego przycisku myszy.

To pociąga za sobą dodatkowe pole rejestruje gdy gest zainicjowano:

dragInitiated = false 

Reszta kod jest następnie modyfikowany zarejestrować rozpoczęcie i zakończenie pożądanych gestów przeciągania na „dragstart” i „dragend ", odpowiednio. Akcje "przeciągnij" są wtedy wykonywane tylko wtedy, gdy poprawnie zainicjowano gesty przeciągania.

nodeDrag = d3.behavior.drag() 
    .on "dragstart", (d, i) -> 
    if (d3.event.sourceEvent.which == 1) # initiate on left mouse button only 
     dragInitiated = true    # -> set dragInitiated to true 
     force.stop() 
    .on "drag", (d, i) -> 
    if (dragInitiated)     # perform only if a drag was initiated 
     d.px += d3.event.dx 
     d.py += d3.event.dy 
     d.x += d3.event.dx 
     d.y += d3.event.dy 
     tick() 
    .on "dragend", (d, i) -> 
    if (d3.event.sourceEvent.which == 1) # only take gestures into account that 
     force.resume()      # were valid in "dragstart" 
     d.fixed = true 
     tick() 
     dragInitiated = false    # terminate drag gesture 

Nie jestem pewien, czy jest to najbardziej eleganckie rozwiązanie, ale to nie działa i nie jest wyjątkowo niezdarny lub duża Hack.

Answer 2

Nieco spóźniony na imprezę, miałem ten sam problem i użyłem następującej metody, aby upewnić się, że moja drag działa tylko dla .

var drag = d3.behavior.drag() 

      .on('drag', function() { 

      console.log(d3.event.sourceEvent.button); 

      if(d3.event.sourceEvent.button == 0){ 
       var mouse = d3.mouse(this); 
       d3.select(this) 
         .attr('x', mouse[0]) 
         .attr('y', mouse[1]); 
      } 

     }); 

Answer 3

Aby obsłużyć wszystkich słuchaczy zdarzenie przeciągania, można użyć poniższy kod:

function dragChartStart() { 
    if(d3.event.sourceEvent.button !== 0) { 
     console.log("not left click"); 
     return; 
    } 
    console.log("dragStart"); 
} 

function dragChartEnd() { 
    if(d3.event.sourceEvent.button !== 0) { 
     console.log("not left click"); 
     return; 
    } 
    console.log("dragEnd"); 
} 

function dragChartMove() { 
    if(d3.event.sourceEvent.button !== 0) { 
     console.log("not left click"); 
     return; 
    } 
    console.log("dragMove"); 
} 

var dragBehavior = d3.behavior.drag() 
    .on("drag", dragChartMove) 
    .on("dragstart", dragChartStart) 
    .on("dragend", dragChartEnd); 

Answer 4

dla D3 v4 zobaczyć drag.filter([filter])

Jeśli filtr jest określony, ustawia filtr do określonej funkcji i zwraca zachowanie przeciągania. Jeśli filtr nie jest określony, zwraca bieżący filtr, który jest domyślny.

drag.filter([filter]) 

po prawej kliknij:

.filter(['touchstart'])

Filtry dostępnych

mouseDown, mousemove, mouseUp, dragstart, selectstart, kliknij, touchstart, touchmove, touchend, touchcancel

Answer 5

Właściwie wi w innej wersji d3 możesz użyć d3.event.which zamiast d3.event.sourceEvent.which, aby wykryć, który przycisk myszy kliknąłeś.