Konva js - привязать событие начала перетаскивания к перетаскиваемому элементу и не перемещать его

Question

У меня есть следующий код.

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>

Что оно делает:

При нажатии кнопки форма будет добавлена. На нем есть кнопки "да" или "нет".

Что я пытаюсь сделать:

При нажатии и перетаскивании yes Я пытаюсь динамически нарисовать стрелку из исходной фигуры и перемещать ее вдоль перетаскивания мышью до точки, где dragstop событие происходит.

Проблема в том, что, когда я перетаскиваю кнопку "Да", форма будет перетаскиваться вместе с ней, которую я хочу остановить. Действие перетаскивания не должно происходить, но функция должна быть привязана к dragstart. Есть ли способ в Конве сделать это?

Любая помощь приветствуется.

Answer 1

Вы должны быть в состоянии достигнуть этого, установив свою форму на перетаскивание, а затем определив для нее dragBoundFunc, который возвращает абсолютную позицию формы, что-то вроде этого:

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}:
    }
});

Большая часть описана в Konva Simple Drag Bounds