CODEWITHSUNDEEP
javascriptsvgdrag-and-dropraphael
KS1
KS1

Reputation: 1039

Drag and drop SVGs with Raphael JS

Looking for some advice (example would be great) on dragging and dropping SVGs using RaphaelJS.

I have found how to drag an object created withint Raphael 

window.onload = function() {
var R = Raphael("canvas", 500, 500);    
var c = R.circle(100, 100, 50).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});
var start = function () {
...
},
move = function (dx, dy) {
...
},
up = function () {
...
};
c.drag(move, start, up);    
};​

But I need to be able to adapt this to work with a seperate SVG file(s) so for example myPage.html has myImage.svg, I need to be able to drag myImage.svg around the 'canvas'. I'm thinking something like 

var c = R.SOMEMETHOD('myImage.svg');
...
c.drag(move, start, up);

For example.

Is there a way to do this and if so, an example would be brilliant!

Upvotes: 2

Views: 1046

Answers (1)

Grooveek
Grooveek

Reputation: 10094

This magic method doesn't exist in RaphaelJS. But there is a way to accomplish this. You can have a look at the raphael-svg-import project on GitHub which works well for basic svgs

Then, you'll want to use a grouping facility as you cannot use the Set functionnality of RaphaelJS

1 - import your SVG
2 - As you import, mark the elements so they belong to the same group

Enjoy !!

Upvotes: 1

Related Questions