Jquery 如何在svg图像中实现可拖动功能？

在这段代码中，我使用Jquery draggable来设置标记。正如你在网站上看到的那样，它起了作用

但我希望，当单击行（“在角度代码中”）时，“onmousemove”事件停止在该位置标记角度值。我尝试了事件“onclick”，但它不允许在单击点顺利进行测量

请，我需要任何人的建议。非常感谢

代码段HTML-CODIGO COMPLETO EM

零度

片段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");
            });

var center=document.querySelector（#center”），
dynamic=document.querySelector（#dynamic”），
路径=document.querySelector（“#deg”），
svg=document.querySelector（“svg”），
txt=document.querySelector（#txt”），
svgNS=svg.namespaceURI，
度=字符串。fromCharCode（176），
arrows=String.fromCharCode（845）；
功能点（x，y）{
返回{
“X”：X，
“Y”：Y
};
}
//贷记将转到Stackoverflow：http://stackoverflow.com/a/14413632
函数getAngleFromPoint（点、中心点）{
变量dy=（point.Y-centerPoint.Y），
dx=（点.X-中心点.X）；
varθ=数学atan2（dy，dx）；
变量角度=（（θ*180）/Math.PI））%360；
角度=（角度<0）？360+角度：角度；
返回角；
}
//功劳归于http://snipplr.com/view/47207/
函数getDistance（点1、点2）{
var-xs=0；
var-ys=0；
xs=point2.X-point1.X；
xs=xs*xs；
ys=点2.Y-点1.Y；
ys=ys*ys；
返回Math.sqrt（xs+ys）；
}
函数fitSVG（）{
变量宽度=window.innerWidth，
高度=窗内高度；
setAttribute（“宽度”，宽度）；
setAttribute（“高度”，高度）；
}
svg.onmousemove=函数（e）{
var centerPoint=新点（center.getAttribute（“cx”）、center.getAttribute（“cy”）；
var点=新点（e.clientX，e.clientY）；
变量角度=数学圆（100*getAngleFromPoint（点，中心点））/100；
变量距离=数学圆（getDistance（点，中心点））；
var d=“M”+centerPoint.X+“”+centerPoint.Y+“L”+point.X+“”+point.Y；
setAttribute（“d”，d）；
setAttribute（“x”，point.x）；
setAttribute（“y”，点.y）；
txt.textContent=距离+箭头+“（“+角度+度+”）；
setAttribute（“变换”、“旋转”（+angle+“”+point.X+“”+point.Y+“”））；
动态.setAttribute（“r”，距离）；
fitSVG（）；
}
//JQUERY可拖动
网格尺寸=10；
$（“.ang”）
.拖拉({
网格：[网格大小，网格大小]
})
.on（“鼠标悬停”，函数（）{
$（this.addClass（“移动光标”）
})
.on（“mousedown”，函数（）{
$（本）
.removeClass（“移动光标”）
.addClass（“抓取光标”）
.addClass（“opac”）；
$（“.text”）.hide（）；
})
.on（“mouseup”，函数（）{
$（本）
.removeClass（“抓取光标”）
.removeClass（“opac”）
.addClass（“移动光标”）；
});

不清楚您想要实现什么，但我怀疑是这样的：

当用户移动鼠标时，计算角度

当用户单击鼠标时，停止计算角度

允许用户拖动

svg

，而不是在这种情况下计算角度

希望这有助于：

代码：

展示：

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

$（函数（）{
变量中心=$（“#中心”），
动态=$（“#动态”），
路径=$（“#度”），
svg=$（“svg”），
txt=$（“#txt”），
svgNS=svg[0]。命名空间URI，
度=字符串。fromCharCode（176），
arrows=字符串。fromCharCode（845），
follow=true；
功能点（x，y）{
返回{
“X”：X，
“Y”：Y
};
}
//贷记将转到Stackoverflow：http://stackoverflow.com/a/14413632
函数getAngleFromPoint（点、中心点）{
变量dy=（point.Y-centerPoint.Y），
dx=（点.X-中心点.X）；
varθ=数学atan2（dy，dx）；
变量角度=（（θ*180）/Math.PI））%360；
角度=（角度<0）？360+角度：角度；
返回角；
}
//功劳归于http://snipplr.com/view/47207/
函数getDistance（点1、点2）{
var-xs=0；
var-ys=0；
xs=point2.X-point1.X；
xs=xs*xs；
ys=点2.Y-点1.Y；
ys=ys*ys；
返回Math.sqrt（xs+ys）；
}
函数fitSVG（）{
变量宽度=window.innerWidth，
高度=窗内高度；
svg.宽度（width）；
svg.高度（高度）；
}
函数updateSVG（e）{
如果（跟随）{
var centerPoint=新点（中心[0]。getAttribute（“cx”），中心[0]。getAttribute（“cy”）；
var点=新点（e.clientX，e.clientY）；
变量角度=数学圆（100*getAngleFromPoint（点，中心点））/100；
变量距离=数学圆（getDistance（点，中心点））；
var d=“M”+centerPoint.X+“”+centerPoint.Y+“L”+point.X+“”+point.Y；
路径属性（“d”，d）；
txt.attr（“x”，point.x）；
txt.attr（“y”，point.y）；
html（距离+箭头+”（“+角度+度+”）；
txt.attr（“变换”、“旋转（“+角度+”+点.X+“+点.Y+”））；
动态属性（“r”，距离）；
}
fitSVG（）；
}
网格尺寸=10；
svg
.mousemove（updateSVG）
。单击（函数（）
$(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;
      }
    });
});