Можно ли перетащить круг в SVG с помощью JQuery UI Dragable? - PullRequest
Новая
       1

Можно ли перетащить круг в SVG с помощью JQuery UI Dragable?

0 голосов
/ 26 декабря 2018

У меня проблемы с перетаскиванием круга в SVG с помощью перетаскиваемого пользовательского интерфейса JQuery.Обратите внимание, что я просто хочу перетащить кружок в 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>

1 Ответ

0 голосов
/ 26 декабря 2018

Принимая ваш точный код, вы получите это: 

$(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 или нацеливаетесь на него, вы можете получить лучшие результаты при перетаскивании. 

$(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 внутри родительского контейнера.

Надеюсь, что это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...