Konva js - Bind drag start event to a draggable element and not move it

Question

I have the following 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();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.3/konva.min.js"></script>
<button id="add_item">
  add item
</button>
<div id="canvas">

</div>

What it does:

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

What I'm trying to do:

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

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 ?

Any help is appreciated.

score 1 · Answer 1 · answered Oct 26 '16 at 09:55

You should be able to achieve this by setting your shape to draggable and then defining a dragBoundFunc on it that returns the absolute position of the shape, something like this:

var eventNode = new Konva.Group({
    x: 100,
    y: 100,
    id: "eventNode_" + elemId,
    draggable: true
    dragBoundFunc: function() {
        var pos = this.getAbsolutePosition();
        return {x: pos.x, y: pos.y}:
    }
});

Most of it is described in Konva Simple Drag Bounds

Konva js - Bind drag start event to a draggable element and not move it

1 Answers1