18

次のように期待どおりに動作するドラッグ動作をいくつか定義しました (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)

ノードでの右クリックのカスタム動作を作成しようとしています。ただし、これにより「dragstart」と「drag」がトリガーされます。つまりe.preventDefault()、「contextmenu」イベントを呼び出した後、問題のノードがマウス ポインターに固定され、もう一度 (左) クリックして強制的に解放するまで (また、「ドラジェンドe.preventDefault()」が発火しない原因になると思います）。

Google グループのスレッドでこの問題に関する簡単な議論を見つけ、Githubの d3 の問題で議論を見つけました。ただし、これらのコメントから、この動作を防ぐ方法を理解できません。

右クリックでドラッグをトリガーしないようにするにはどうすればよいですか?

4

5 に答える 5

1

ドラッグ イベントのすべてのリスナーを処理するには、次のコードを使用できます。

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);
于 2015-09-16T06:35:23.980 に答える
1

パーティーに少し遅れて、私は同じ問題を抱えていました.次の方法を使用してdrag、left click.

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

        });
于 2015-07-04T01:00:28.037 に答える
0

実際には、クリックしたマウス ボタンを検出する代わりに、異なるバージョンのd3を使用したい場合があります。d3.event.whichd3.event.sourceEvent.which

于 2017-09-28T17:50:57.387 に答える