javascript：拖动路径元素使其不可用答案

【问题标题】：javascript: Dragging a path element makes it unavailablejavascript：拖动路径元素使其不可用
【发布时间】：2019-07-04 11:11:54
【问题描述】：

我的测试代码中有两个元素。一个闭合路径元素和一个矩形元素。我正在使用 svg.draggable.js 库来拖动这两个元素。 rect 元素似乎可以很好地拖动，但是当我单击它并尝试拖动它时，路径元素会消失。有人可以解释发生了什么以及如何使路径元素可拖动吗？

< body >
  <
  div id = "curve" >
  <
  /div> <
div id = "drawing" > < /div> <
script id = "jscript" >
  var r = SVG('drawing').size(500, 500);
var p = r.path().attr({
  id: 'path0',
  padding: '0px',
  fill: 'blue',
  d: 'M0 0 C100 120 150 120 150 100z',
  stroke: {
    color: 'black',
    width: 1,
    padding: '1px'
  }
}).draggable();

var b = r.rect().attr({
  id: 'rect0',
  x: 300,
  y: 300,
  height: 30,
  width: 30,
  fill: 'red'
}).draggable(); <
/script> < /
body >

<!DOCTYPE html>

<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
  <script src="file:///C:/Users/angular2/Downloads/svg.draggable.js/dist/svg.draggable.js">
    <!-- It does not appear there is any cdns location for svg.draggable.js library online. You will need to download it and install it locally if you would like to test the code -->
  </script>
</head>

【问题讨论】：

欢迎来到 Stack Overflow。请修复您的 sn-p 以便它运行。
Paul，sn-p 不会按原样运行。需要下载它，因为它需要 svg.draggable.js 库，而我找不到该库的 cdns。该库也需要下载。
请创建一个 jsfiddle，将 svg.js 和 svg.draggable.js 作为资源加载，以便它显示您的问题。您可以使用 raw.githack.com 获取库的链接
@Learner 你可以使用这个链接：raw.githubusercontent.com/svgdotjs/svg.draggable.js/master/src/…
@保罗。我尝试了不同的浏览器，包括直接来自 raw.githack 的生产和开发链接。我收到以下错误：“SyntaxError：导入声明只能出现在模块的顶层”

标签： javascript svg path svg.js

【解决方案1】：

我能够通过创建一个嵌套组，将路径元素放入嵌套组中，然后使嵌套组而不是单个元素可拖动来解决问题。

【讨论】：