Menu
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();
I am able to move the circle by accessing its cx and cy attributes so there must be a way to drag it.
<!DOCTYPE HTML> <html > <head> <title></title> <link href="css/reset.css" rel="stylesheet" type="text/css"> <link href="css/layout.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="js/jquery.js" type="text/javascript" ></script> <script src="js/jquerysvg/jquery.svg.js" type="text/javascript" ></script> <script src="js/jquery-ui.js" type="text/javascript" ></script> <script type="text/javascript" > 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(); } </script> </head> <body> <div id="target" ></div> <svg:svg id="svginline"> <svg:circle id="circ11" class="area" cx="75" cy="75" r="50" stroke="black" stroke-width="2" fill="red"/> </svg:svg> <div id="result" >ffff</div> </body> </html> 
497
Using the mouse to drag an SVG element (or group of elements) can be accomplished by: Adding mousedown handler to starts the drag: adding a translation on the element to use during dragging (if needed), tracking mousemove events, and adding a mouseup handler to end the drag.
Draggable() Method This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.
You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.
jQuery UI draggable behavior does work, but you need to update the position manually in the drag handler, as relative CSS positioning doesn't work inside SVG.
svg.rect(20,10,100,50, 10, 10, {fill:'#666'}); svg.rect(40,20,100,50, 10, 10, {fill:'#999'}); svg.rect(60,30,100,50, 10, 10, {fill:'#ccc'}); $('rect') .draggable() .bind('mousedown', function(event, ui){ // bring target to front $(event.target.parentElement).append( event.target ); }) .bind('drag', function(event, ui){ // update coordinates manually, since top/left style props don't work on SVG event.target.setAttribute('x', ui.position.left); event.target.setAttribute('y', ui.position.top); }); The solution I'm tinkering with involves (to tie it to your case) creating a new div and svg, positioned over the original shape, to act as the handle for the targeted svg object. Make the handle div draggable and store the starting top/left offset externally (think hidden div). Once the "stop" event for the draggable div is fired, figure out the degree of change for the top and left (stopX-startX=changeX) and apply that to the original shapes coordinates. Then .remove() your temporary shape.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
