title: d3 - drag behaviour triggered when clicking
body: <p>In my svg container, I have a <code>&lt;g&gt;</code> with a rectangle and text. When dragging this group, I want to make the group disappear and just drag a small rectangle across the screen to represent the object. In order to do that, I use a <code>&lt;div&gt;</code> which I make visible when dragging starts. I make my svg group being dragged disappear.</p>
  
  <p>You can see the fiddle <a href="http://jsfiddle.net/mjoffily/g1g7tahv/2/" rel="nofollow">here</a>.
  And code here:</p>
  
  <pre><code>   function dragDiv2End(d) {
      console.log('ending');
      var a = d3.select(this);
      a.attr('x', initial.x).attr('y', initial.y).attr('width', initial.width).attr('height', initial.height);
      a.transition().style("opacity",1);
      d3.select('#dragid').style('visibility', 'hidden');
  
  }
  
  function dragDiv2Start(d) {
      d3.event.sourceEvent.stopPropagation();
      console.log('starting');
      var a = d3.select(this);
      initial = {x: a.attr('x'), y: a.attr('y'), width: a.attr('width'), height: a.attr('height')};
      a.attr('x', d3.mouse(this)[0])
      .attr('y', d3.mouse(this)[1]) .attr('width', 20)
      .attr('height', 20).style("opacity",0);
  
      var b = d3.select('#dragid');
      b.style({
          left: (parseInt(d3.mouse(this)[0])) + "px",
          top: d3.mouse(this)[1] + "px",
          border: "1px solid black",
          visibility: 'visible'
  
      });
  }
  
  function dragDiv2Move(d) {
      var b = d3.select(this);
  
      var a = d3.select('#dragid');
      a.transition().delay(50).style('opacity', 1);
      //console.log(d3.event.x, d3.event.y, a.style("right"));
      console.log(d3.mouse(this));
      a.style({
          left: (parseInt(d3.mouse(this)[0])) + "px",
          top: d3.mouse(this)[1] + "px"
      });
  }
  
  function doClick(d) {
      if (d3.event.defaultPrevented) return;
      console.log('clicked');
  }
  var initial = {};
  var svg = d3.select('#div2').append('svg').attr('height', 300).attr('width', 300).style('border', 'solid 1px blue');
  
  var g = svg.append('g').on('click', doClick);
  g.append('rect').attr('x', 10).attr('y', 10).attr('width', 200).attr('height', 200).style('stroke', 'red').style('fill', 'white');
  var text = g.append('text')
  text.text('my test').attr('x', 50).attr('y', 50);
  
  var dragDiv = d3.behavior.drag()
          .origin(Object)
          .on("drag", dragDivMove);
  
  var dragDiv2 = d3.behavior.drag()
          .origin(Object)
          .on("dragstart", dragDiv2Start)
          .on("drag", dragDiv2Move)
          .on("dragend", dragDiv2End);
  g.call(dragDiv2);
  </code></pre>
  
  <p>Trouble starts with the click event which the group should also listen to. I get this flickering effect of my svg object disappearing (behaviour of the drag event) when a simple click occurs. </p>
  
  <p>I understand why it happens but this is very undesirable and I am struggling to find a solution to this problem. To see it occurring, just click and/or drag the red rectangle.</p>
  
  <p>I tried preventing the event from propagating, which works fine from drag to click but not the other way around.</p>
  
  <p>Any advice will be much appreciated.</p>