Using symbols or sprites with draggable?

[Telefisch]

Hi guys,

I'm new to svg, so please be Patient with me

 

I'm just Looking for a solution to build a simple Editor for creating some schemes with Symbols.

My Suggestion is to drag a Symbol from a database on a view and place it there. Give it some porperties an save this drawing later in the database.

For this, my first experiences with svg have bee Building Symbols, so I can define all Symbols in the site and <use> them in the drawing.

So fa, so good.

Now I'd like to move some Symbols by mouse and therefor, I tried draggable.

Now if I make the used Symbols draggable, all Symbols are moved, not only the <use>d Symbols.

 

My General Question is, if this is normal and if it perhaps works with sprites.

See the Pen LoEReP by Telefisch (@Telefisch) on CodePen

[PointC]

If you don't want them all to move at the same time, you can do this:

 

Draggable.create("use", {...

 

Does that help? Happy tweening.

[Telefisch]

Yes, this works. 

Thank you. 

 

But now I there is no way for using symbols that are not draggable?

can you perhaps give me a tip for a complete SVG course?

The only courses I found are just creating the Basic shapes and some little steps around. 

[PointC]

You don't want all the symbols to be draggable? You could add a class to the ones you want to drag and create a draggable for that class.

 

SVG is a deep subject so it depends on what you're trying to do, but Sara Soueidan's site has lots of good info to get started:

 

https://www.sarasoueidan.com/tags/svg/

 

Happy tweening.

[Telefisch]

Thank you for the quick answer.