將元素髮送到前臺時未發出點擊

Question

創建簡單圖表組件時，我無法正確組合拖動，將拖動元素髮送到前景並單擊。

我想什麼來實現：

1. 的拖動或點擊的元素應該被髮送到前景（在其他元件的前面）
2. 的選擇動作不應該被射出的拖動的元素
3. 點擊或點擊應選擇一個元素

它適用於其他元素前面的元素，但點擊任何其他元素只是將它發送到前面，沒有點擊。你能幫我解決嗎？

的jsfiddle：http://jsfiddle.net/1o1dnpsw/2/

HTML

<svg width="250" height="150"> 
</svg> 
<div id="msg">click on rectangle or drag it</div> 
<p>Problem: while clicking on the element which is not on the foreground (yellow) the click is not emitted.</p> 

CSS

body { font-family: sans-serif; font-size: 12px; } 
svg { border: 1px solid gray; } 
svg rect { border: 1px solid gray; } 
div { border: 1px dotted gray; margin-top: 10px; width: 250px; height: 25px; 
    text-align: center; line-height: 25px; } 

腳本

function select() { 
    document.getElementById('msg').innerText = 
     'selected at ' + new Date().getTime(); 
} 

function addBox(color, x, y) { 
    var r = d3.selectAll('svg').append('rect') 
     .attr('x', x).attr('y', y) 
     .attr('width', 50).attr('height', 50) 
     .attr('fill', color) 
     .on('mousedown', function() { 
      // move element to foreground 
      this.parentNode.appendChild(this); 
     }) 
     .on('click', function() { 
      // do not click when dragged 
      if (d3.event.defaultPrevented) { 
       return; 
      } 
      select(); 
     }) 
     .call(d3.behavior.drag() 
      .origin(function() { return { x : x, y : y }; }) 
      .on('dragstart', function() { 
       d3.event.sourceEvent.preventDefault(); 
      }) 
      .on('drag', function() { 
       x = d3.event.x; 
       r.attr('x', x); 
       y = d3.event.y; 
       r.attr('y', y); 
      }) 
      .on('dragend', function() { 
      })); 
} 

addBox('#FFC60D', 10, 10); 
addBox('#161EFF', 40, 40); 

Answer 1

修正了它。

小提琴：http://jsfiddle.net/1o1dnpsw/3/

新增2個變量起作用addBox（）：

var oldX; 
var oldY; 

而改變兩者的阻力和dragend事件：

.on('drag', function() { 
    oldX = r.attr('x'); 
    oldY = r.attr('y'); 
    x = d3.event.x; 
    r.attr('x', x); 
    y = d3.event.y; 
    r.attr('y', y); 
}) 
.on('dragend', function() { 
    if (x == oldX && y == oldY) { 
     select(); 
    } 
}));