Question

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

< 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>

Answer 1

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

javascript：拖动path元素使其不可用

1 个答案: