SVG.Js Drag & Click Conflict

by Anil Vangari

HTML

<script src="https://cdn.rawgit.com/svgdotjs/svg.js/master/dist/svg.min.js"></script>
<script src="https://cdn.rawgit.com/svgdotjs/svg.draggable.js/master/dist/svg.draggable.min.js"></script>
<div id="drawing"></div>

CSS

rect {
  fill: #f06;
}

.box {
  fill: none;
  strokeWidth: 1;
  stroke: green;
}

#drawing {
  display: block;
  border: 1px solid red;
}

JavaScript

var draw = SVG('drawing').size(300, 200);

        // Don't register for click event. We will determine that in drag end. 
        var rect = draw.rect(150, 75)
          //.click(onClick)
          .draggable();

        // Capture the drag start position for calculating delta.
        var dragPoint;

        rect.on("beforedrag", function(evt) {
          console.log("beforedrag", evt);
        });

        rect.on("dragstart", function(evt) {
          dragPoint = {
            x: evt.detail.p.x,
            y: evt.detail.p.y,
            dragging: false
          };
          console.log("dragstart", dragPoint, evt.detail.p.x, evt.detail.p.y);
        });

        rect.on("dragmove", function(evt) {
          if (dragPoint && !dragPoint.dragging) {
            if (Math.abs(dragPoint.x - evt.detail.p.x) > 10 ||
              Math.abs(dragPoint.y - evt.detail.p.y) > 10) {
              dragPoint.dragging = true;
              console.log("custom drag start");
              onDragStart(evt);
            }
          }
          if (dragPoint && dragPoint.dragging) {
            console.log("custom drag move");
            onDragMove(evt);
          }
          console.log("dragmove", dragPoint, evt.detail.p.x, evt.detail.p.y);
        });

        rect.on("dragend", function(evt) {
          console.log("dragend", dragPoint);
          if (dragPoint.dragging) {
            console.log("custom drag end");
            onDragEnd(evt);
          } else {
            console.log("custom click");
            onClick(evt);
          }
          dragPoint = null;          
        });

        function onClick(evt) {
          console.log("onClick");
        }

        function onDragStart(evt) {
          console.log("onDragStart");
        }

        function onDragMove(evt) {
          console.log("onDragMove");
        }

        function onDragEnd(evt) {
          console.log("onDragEnd");
        }