Databases
StackOverflow2013
Postsdbo
POSVG draggable using JQuery and Jquery-svg
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSVG draggable using JQuery and Jquery-svg
    text
    copied!<p>I have an HTML 5 page where I load an svg circle. When I click on the circle I create another small circle where I click. I want to be able to drag the second circle but cant seem to do it with jquery-ui .draggable();</p> <p>I am able to move the circle by accessing its cx and cy attributes so there must be a way to drag it.</p> <pre><code> &lt;!DOCTYPE HTML&gt; &lt;html &gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="css/reset.css" rel="stylesheet" type="text/css"&gt; &lt;link href="css/layout.css" rel="stylesheet" type="text/css"&gt; &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt; &lt;script src="js/jquery.js" type="text/javascript" &gt;&lt;/script&gt; &lt;script src="js/jquerysvg/jquery.svg.js" type="text/javascript" &gt;&lt;/script&gt; &lt;script src="js/jquery-ui.js" type="text/javascript" &gt;&lt;/script&gt; &lt;script type="text/javascript" &gt; jQuery(document).ready(function(){ $('#target').svg({onLoad: drawInitial}); $('circle').click(function(e){ drawShape(e); var shape = this.id; }); $('.drag').mousedown(function(e){ var shape = this.id; this.setAttribute("cx", e.pageX); this.setAttribute("cy", e.pageY); }); }) function drawInitial(svg) { svg.add($('#svginline')); } function drawShape(e) { var svg = $("#target").svg('get'); $('#result').text(e.clientX + ": " + e.pageX); var dragme = svg.circle(e.clientX, e.clientY, 5, {fill: 'green', stroke: 'red', 'stroke-width': 3, class_: 'drag'}); //$(dragme).draggable(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="target" &gt;&lt;/div&gt; &lt;svg:svg id="svginline"&gt; &lt;svg:circle id="circ11" class="area" cx="75" cy="75" r="50" stroke="black" stroke-width="2" fill="red"/&gt; &lt;/svg:svg&gt; &lt;div id="result" &gt;ffff&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload