Konva js - Bind drag start event to a draggable element and not move it
<p>I have the following code. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var stage = new Konva.Stage({
  container: 'canvas',
  width: 500,
  height: 300
});

var eventWrapperLayer = new Konva.Layer({});

var createTriggerBlock = function(elemType, elemText, elemId) {
  eventElementCounter = 0;

  var eventNode = new Konva.Group({
    x: 100,
    y: 100,
    id: "eventNode_" + elemId,
  });

  eventNode.setAttr("nodeType", elemType);
  eventNode.setAttr("nodeSpecificName", elemText);
  eventNode.setAttr("nodeUniqueId", elemId);
  var nodeContainer = new Konva.Rect({
    x: 0,
    y: 0,
    width: 200,
    height: 60,
    cornerRadius: 10,
    fill: "red",
    strokeWidth: 2,
    stroke: "black"
  });





  var yesCircle = new Konva.Arc({
    x: nodeContainer.getX() + 180,
    y: nodeContainer.getY() + 30,
    innerRadius: 20,
    outerRadius: 50,
    angle: 70,
    fill: '#1BBC9B',
    visible: false,
    stroke: "white",
    strokeWidth: 2
  });

  var yesText = new Konva.Text({
    x: yesCircle.getX() + 10,
    y: yesCircle.getY() - 25,
    text: "Yes",
    fontSize: 12,
    fontFamily: 'mf-font',
    fill: 'black',
    align: 'center',
    width: 100,
    visible: false
  });

  yesCircle.rotate(-70);
  // yesText.rotate(-70);


  var noCircle = new Konva.Arc({
    x: nodeContainer.getX() + 180,
    y: nodeContainer.getY() + 30,
    innerRadius: 20,
    outerRadius: 50,
    angle: 70,
    fill: '#E74C3C',
    visible: false,
    stroke: "white",
    strokeWidth: 2
  });

  var noText = new Konva.Text({
    x: noCircle.getX() + 10,
    y: noCircle.getY() + 25,
    text: "No",
    fontSize: 12,
    fontFamily: 'mf-font',
    fill: 'black',
    align: 'center',
    width: 100,
    id: "noText_" + eventElementCounter,
    visible: false
  });


  eventNode.on('mouseover', function(event) {
    document.body.style.cursor = 'pointer';
    yesCircle.show();
    noCircle.show();
    yesText.show();
    noText.show();
    eventWrapperLayer.draw();
  });

  eventNode.on('mouseout', function() {
    document.body.style.cursor = 'default';
    yesCircle.hide();
    noCircle.hide();
    yesText.hide();
    noText.hide();
    eventWrapperLayer.draw();
  });
  
  yesCircle.on('dragstart', function() {
            //do something
            eventWrapperLayer.draw();
        });


  eventNode.add(yesCircle);
  eventNode.add(noCircle);
  eventNode.add(nodeContainer);
  eventNode.add(yesText);
  eventNode.add(noText);
  eventNode.draggable('true');
  eventWrapperLayer.add(eventNode);
  stage.add(eventWrapperLayer);

}

jQuery(document).ready(function() {
  $("#add_item").click(function() {
    createTriggerBlock();
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.rawgit.com/konvajs/konva/1.0.3/konva.min.js"&gt;&lt;/script&gt;
&lt;button id="add_item"&gt;
  add item
&lt;/button&gt;
&lt;div id="canvas"&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>What it does:</strong></p>

<p>On click of a button, a shape will get added. It has yes or no buttons. </p>

<p><strong>What I'm trying to do:</strong></p>

<p>On clicking and dragging on <code>yes</code> I'm trying to dynamically draw an arrow from the source shape and move it along the mouse drag till the point where <code>dragstop</code> event occurs.</p>

<p>The problem is when I drag the yes button , the shape will get dragged along with it , which I want to stop. The drag action should not happen , but a function should be bind on dragstart. Is there a way in Konva to do this ?</p>

<p>Any help is appreciated.</p>