Question

我无法使用可拖动的JQuery UI在SVG中拖动圆圈。请注意，我只想在svg中拖动圆圈，而不是整个svg。谢谢大家，这不是一项家庭作业，因此请给我一些使它起作用的代码。我已经在互联网上搜索了数小时以找到解决方案，但没有发现任何帮助！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
</head>
<body>
<div>
<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
    <title></title>
    <desc></desc>
    <circle id="circle" cx="60" cy="60" r="60" style="fill: #ff9; stroke: red;">
    </circle>
</svg>
</div>

<p id="demo"></p>
<script>
$( function() {
        $("#circle").draggable();
    } );
</script>

</body>
</html>

Answer 1

使用您的确切代码，您会得到：

$(function() {
  $("#circle").draggable();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
    <title></title>
    <desc></desc>
    <circle id="circle" cx="60" cy="60" r="60" style="fill: #ff9; stroke: red;">
    </circle>
  </svg>
</div>

<p id="demo"></p>

是的，您可以拖动圆并移动它，但是一旦松开，基本上就可以通过样式为其分配新的x,y。这将产生不同的结果。尝试将其拖动一点，然后看看会发生什么。

如果包装SVG或以SVG为目标，则拖动时可能会获得更好的效果。

$(function() {
  $("svg").draggable({
    containment: "parent"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="svg-wrap" style="width: 800px; height: 800px;">
  <svg width="122" height="122" xmlns="http://www.w3.org/2000/svg">
    <title></title>
    <desc></desc>
    <circle id="circle" cx="60" cy="60" r="60" style="fill: #ff9; stroke: red;">
    </circle>
  </svg>
</div>

<p id="demo"></p>

这允许您将圆作为SVG在父容器中移动。

希望有帮助。

是否可以使用JQuery UI Dragable在SVG中拖动圆？

1 个答案: