how implement draggable function in svg image?

Question

In this code I used Jquery-draggable to set the tag. It worked, as you can see at https://jsbin.com/yekukar/edit?html,css,js

But I would like that when clicking on the line, (" in code for the angle"), the event "onmousemove" stopped marking the angle value in the place. I tried the event "onclick", but not it does not allow the measurement to take place smoothly at the clicked point.

Please, I need anyone suggestion.tks a lot !!!

SNIPPET HTML - CODIGO COMPLETO EM https://jsbin.com/yekukar/edit?html,css,js

    <svg class="ang" width="100%" height="500">

                <path d="M 1000 300 L 800 300" class="deg45" transform="rotate(0 300 300)">
            </path>
                <text text-anchor="left" x="850" y="300" style="font-size: 15pt;"  transform="rotate(0 300 300)">0 degrees</text>

            <circle cx="900" cy="300" id="center" r="2" />
            <circle cx="900" cy="300" id="dynamic" r="2" fill="none" />
                <path id="deg" d="M 300 300 L 400 300" stroke="#000" stroke-width="1px" />
                <text text-anchor="left" x="0" y="100" id="txt" style="font-size: 20pt;" transform="rotate(45 100 100)"></text>

snippet JS

                var center = document.querySelector("#center"),
            dynamic = document.querySelector("#dynamic"),
            path = document.querySelector("#deg"),
            svg = document.querySelector("svg"),
            txt = document.querySelector("#txt"),
            svgNS = svg.namespaceURI,
            degree = String.fromCharCode(176),
            arrows = String.fromCharCode(845);

            function Point(x, y) {
            return {
            "X": x,
            "Y": y
            };
            }

            // Credits goes to Stackoverflow: http://stackoverflow.com/a/14413632
            function getAngleFromPoint(point, centerPoint) {
            var dy = (point.Y - centerPoint.Y),
            dx = (point.X - centerPoint.X);
            var theta = Math.atan2(dy, dx);
            var angle = (((theta * 180) / Math.PI)) % 360;
            angle = (angle < 0) ? 360 + angle : angle;
            return angle;
            }
            // Credits goes to http://snipplr.com/view/47207/
            function getDistance(point1, point2) {
            var xs = 0;
            var ys = 0;

            xs = point2.X - point1.X;
            xs = xs * xs;

            ys = point2.Y - point1.Y;
            ys = ys * ys;

            return Math.sqrt(xs + ys);
            }

            function fitSVG() {
            var width = window.innerWidth,
            height = window.innerHeight;
            svg.setAttribute("width", width);
            svg.setAttribute("height", height);
            }

            svg.onmousemove = function (e) {
            var centerPoint = new Point(center.getAttribute("cx"), center.getAttribute("cy"));
            var point = new Point(e.clientX, e.clientY);
            var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
            var distance = Math.round(getDistance(point, centerPoint));
            var d = "M " + centerPoint.X + " " + centerPoint.Y + " L " + point.X + " " + point.Y;
            path.setAttribute("d", d);
            txt.setAttribute("x", point.X);
            txt.setAttribute("y", point.Y);
            txt.textContent = distance + arrows + " (" + angle + degree + ")";
            txt.setAttribute("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");

            dynamic.setAttribute("r", distance);
            fitSVG();
            }

            //JQUERY DRAGGABLE

            grid_size = 10;

            $(" .ang")
            .draggable({
            grid: [grid_size, grid_size]
            })

            .on("mouseover", function () {
            $(this).addClass("move-cursor")
            })

            .on("mousedown", function () {
            $(this)
            .removeClass("move-cursor")
            .addClass("grab-cursor")
            .addClass("opac");

            $(" .text ").hide();

            })

            .on("mouseup", function () {
            $(this)
            .removeClass("grab-cursor")
            .removeClass("opac")
            .addClass("move-cursor");
            });

Answer 1

It's not clear what you are trying to accomplish, but I suspect it is something like this:

1. As user moves mouse, calculate angle
2. When user clicks mouse, stop calculating angle
3. Allow user to drag svg around, and not calculate angle as this happens

Hope this helps:

Code: https://jsfiddle.net/Twisty/8fy76yrt/24/

Show: https://jsfiddle.net/Twisty/8fy76yrt/24/show/

JavaScript

$(function() {
  var center = $("#center"),
    dynamic = $("#dynamic"),
    path = $("#deg"),
    svg = $("svg"),
    txt = $("#txt"),
    svgNS = svg[0].namespaceURI,
    degree = String.fromCharCode(176),
    arrows = String.fromCharCode(845),
    follow = true;

  function Point(x, y) {
    return {
      "X": x,
      "Y": y
    };
  }

  // Credits goes to Stackoverflow: http://stackoverflow.com/a/14413632
  function getAngleFromPoint(point, centerPoint) {
    var dy = (point.Y - centerPoint.Y),
      dx = (point.X - centerPoint.X);
    var theta = Math.atan2(dy, dx);
    var angle = (((theta * 180) / Math.PI)) % 360;
    angle = (angle < 0) ? 360 + angle : angle;
    return angle;
  }
  // Credits goes to http://snipplr.com/view/47207/
  function getDistance(point1, point2) {
    var xs = 0;
    var ys = 0;

    xs = point2.X - point1.X;
    xs = xs * xs;

    ys = point2.Y - point1.Y;
    ys = ys * ys;

    return Math.sqrt(xs + ys);
  }

  function fitSVG() {
    var width = window.innerWidth,
      height = window.innerHeight;
    svg.width(width);
    svg.height(height);
  }

  function updateSVG(e) {
    if (follow) {
      var centerPoint = new Point(center[0].getAttribute("cx"), center[0].getAttribute("cy"));
      var point = new Point(e.clientX, e.clientY);
      var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
      var distance = Math.round(getDistance(point, centerPoint));
      var d = "M " + centerPoint.X + " " + centerPoint.Y + " L " + point.X + " " + point.Y;
      path.attr("d", d);
      txt.attr("x", point.X);
      txt.attr("y", point.Y);
      txt.html(distance + arrows + " (" + angle + degree + ")");
      txt.attr("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
      dynamic.attr("r", distance);
    }
    fitSVG();
  }

  grid_size = 10;

  svg
    .mousemove(updateSVG)
    .click(function() {
      follow = !follow;
      return true;
    })
    .draggable({
      classes: {
        "ui-draggable-dragging": "opac"
      },
      cursor: "grab",
      grid: [grid_size, grid_size],
      start: function(e, ui) {
        $(this).find(".text").hide();
        follow = false;
      },
      stop: function() {
        follow = true;
      }
    });
});

There are lots of changes. I prefer to keep as much jQuery as I can and not mix code if possible. So I assigned all the jQuery Objects to the variables. To make use of the proper SVG attributes, can call the 1st element index [0] as needed. You will see this in the updateSVG(). I also switched to .attr() as needed.

follow is a helpful variable to track if we should follow the mouse movement. A click event on the svg will toggle this value. Also we turn it off in start and back on in stop.