代码之家 › 专栏 › 技术社区 › afriedman111

d3拖放和鼠标组事件

d3.js

afriedman111 · 技术社区 · 6 年前

我用d3来选择矩形。我试图让拖动结束和鼠标指针事件都在矩形上触发。看起来像是拖动事件阻止了mouseup事件。(它们不会阻止鼠标悬停在事件上)我已经将鼠标向上和拖动事件绑定到矩形。当我单击矩形时,mouseup事件不会激发,只会激发drag end。我尝试了event.stoppropagation()和preventDefault()的不同组合来控制触发哪些事件。我还尝试将拖动事件设置为空。这些都不起作用。如何让拖动端和鼠标指针同时向鼠标指针开火?

var target = d3.select('#test');
target.on('mouseup', (d) => alert('mouseup'))
 .call(d3.drag()
   .on("start", function () {
     console.log('start')
   })
   .on("drag", function () {
     console.log('drag');
   }).on("end", function () {
     alert('end');
     //d3.select(window).on('click.drag', null);
   })
);

<div id='test' />

#test { background:red; position:absolute; height:40px; width:40px; }

此功能在D3 v3中工作,但在V4中不工作

编辑: 为了澄清这个问题,我的问题是当拖动事件触发时,页面上的mouseup事件被禁用(这一点也适用于所有元素)。当你从一个形状拖到另一个形状时,我想确定目标元素(因此需要鼠标)。

2 回复 | 直到 6 年前

A Zibuda 6 年前

根据我的经验,您应该能够将鼠标向下逻辑添加到拖动启动事件中。你在这个案子里试过吗?如果使用鼠标向下键更复杂,并且不适用于拖动启动事件,请添加详细信息。

afriedman111 6 年前

当您单击一个元素并拖动到另一个元素时,我想检测第二个元素是什么。当拖动对象时,mouseup不会触发,但mouseover和mouseout会触发。我用这些函数设置了一个mouseover_obj变量。这样,当拖动结束事件执行后,可以访问该对象。如果它不是空的,那么它的值就是鼠标的形状。

下面是一些代码: JsFiddle for D3 Mouseup while Drag

var mouseover_node = null;
var svg = d3.select('body').append('svg').attr('width', 1000).attr('height', 1000);
var rect = svg.selectAll('rect')
  .data([0, 2, 3])
  .enter().append('rect')
  .attr('x', function(x) { return +x * 0; })
  .attr('y', function(y) {  return +y * 120; })
  .attr('width', function() { return 100; })
  .attr('height', function() { return 100; })
  .attr('fill', function(x) {  if(x == 0){return'red';}else return 'blue'; });


rect.on("mouseover", (d) => {this.mouseover_node = d})
  .on("mouseout", (d) => {this.mouseover_node = null})
  .call(d3.drag()
    .on("start", function () {
        console.log('start');
        return false;
        })
    .on("drag", function () {
        console.log('drag');
        })
    .on("end",  (sourceElement,index,svgItems) => {
        console.log('end drag with mouseover: ' + this.mouseover_node);
        })
);