ansaurus

Question

SVG draggable using JQuery and Jquery-svg

Answer 1

A:

Take a look at the SVG draggable jQuery plugin. I guess it was made to solve problems like your one:

Also, jQuery UI draggable does not natively support the dragging of SVG objects, a ticket request this functionality was submitted 5 months ago:

http://dev.jqueryui.com/ticket/4211

The response from the jQuery guy was:

"Very unlikeley to happen, considering the extremely low adoption of SVG."

karim79 2009-07-10 09:12:00

Thanks, I am using jquery-svg from the top link you posted but havent been able to fin any info on draggable. I have searched within all the js files included in the download but cant find any reference to being able to drag.

skyfoot 2009-07-10 09:19:43

Answer 2

+1 A:

I have created a basic drag drop function to target my svg objects. I dont have any containment or collistion detection. There is an issue if I move the mouse too quicly I will leave the draggable object behind.

<!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/jquery-ui.js" type="text/javascript" ></script>
<script src="js/jquerysvg/jquery.svg.js" type="text/javascript" ></script>
<script src="js/jquerysvg/jquery.svgdom.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;

    }); 
})

function drawInitial(svg) {
    svg.add($('#svginline')); 
}

function onMouseDown(evt){
     //var shape = this.id;

     var target = evt.target;  
     target.onmousemove = onMouseMove; 

     return false; 
}

function onMouseMove(evt){
    circle = evt.target

    var cx = circle.getAttribute("cx");
    offsetX = $('#target').offset().left;
    offsetY = $('#target').offset().top
    circle.setAttribute("cx", evt.clientX -offsetX);
    circle.setAttribute("cy", evt.clientY - offsetY);

    circle.onmouseup = OnMouseUp;
}

function OnMouseUp(evt) { 
    var target = evt.target;  
    target.onmousemove = null; 
}

function drawShape(e) {
    var svg = $("#target").svg('get');
    offsetX = $('#target').offset().left;
    offsetY = $('#target').offset().top;
    $('#result').text(e.clientX + ": " +  e.pageX);
    var dragme = svg.circle(e.clientX - offsetX, e.clientY - offsetY, 5, {onmousedown: "onMouseDown(evt)",fill: 'green', stroke: 'red', 'stroke-width': 3}); 
    $(dragme).addClass('drag');
}
</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>

skyfoot 2009-07-10 12:02:01

I had a response from Keith Wood who created jquerysvghttp://keith-wood.name/svg.html"I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."

skyfoot 2009-07-23 16:15:59

Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.

skyfoot 2009-09-02 10:49:24

Answer 3

A:

Microsoft just announced they will provide deep SVG support in IE 9, which has spurred new interest. They have been holding out for a long time; this is why SVG adoption was low.

Bill 2010-03-29 20:44:09

What has this got to do with the question?

fahadsadah 2010-06-19 08:51:30

Answer 4

A:

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.

Mike 2010-09-30 05:34:43

ansaurus

tags:

views:

answers:

SVG draggable using JQuery and Jquery-svg

related questions