How To Enable Dragging in SVG

SVG allows you to do quite a bit in terms of graphics in the browser that was not possible without a special plugin like Flash. This post describes how I enabled dragging of entities around the screen.

Introduction

If you are unfamiliar with SVG I would recommend checking out my two Kickstart tutorials here: One and Two. Furthermore, you can see many useful examples at SVGBasics. This should give you a good start if you've never seen SVG or XML before. However, this entry also assumes you are moderately familiar with web development concepts like the DOM and JavaScript.

My goal was to create an SVG document that allowed the user to drag entities around the screen as they do with existing windowing environments today. The final results of my work can be seen HERE.

SVG Events

In SVG 1.1, you can hook up event handlers to SVG entities by techniques that should be familiar to most HTML/JS coders nowadays:

When the rectangle is clicked on, the JavaScript function buttonClick() will be called which lets you do whatever you want. In SVG 1.2 this will change as it uses only DOM Level 3 Events (introducing handlers and listeners), but since there will be some time before SVG 1.2 becomes the defacto standard to code for, SVG 1.1 is it.

Dragging

Now that you understand how to hook up event handlers, the basics of a dragging operation are:

• User presses the mouse button while the cursor is on top of an object
• User moves the mouse while holding the button down (dragging), the object should follow the mouse cursor
• User lifts the mouse button to "release" the object

Each of these is handled by three different events: mousedown, mousemove and mouseup that you are able to capture and handle with arbitrary JavaScript.

SVG Mouse Coordinates

The tricky part of handling mouse events in SVG comes with the fact that the client coordinates (i.e. the browser's window) does not necessarily equal the SVG user coordinates. This is because in SVG you can change coordinate systems within your SVG document by specifying a viewBox attribute on the top-level <svg> element and you can transform SVG entities by scaling, translating, skewing, etc. These are very convenient features to have, yet they do cause some hassle with mapping mouse coordinates to SVG coordinates.

In my investigations, I started with this post by Jonathan Watt on the Yahoo! svg-developers mailing list where he specifies:

This takes the clientX and clientY values within the event object (familiar to most HTML/JavaScript coders nowadays) and transforms them using the inverse of the SVG element's Current Transformation Matrix (CTM). What does that mean? Well, it translates my mouse coordinates into SVG user coordinates for a given SVG element. Exactly what I want. With that we can determine how the mouse cursor is offset from a given anchor point within the SVG element and properly drag it around.

I used the above technique in a very simple demo here: Draggable SVG Demo One. Supported platforms are Internet Explorer + Adobe SVG Viewer 6.0 Alpha and Firefox 1.5. Unfortunately it looks like Opera 9 TP1 and ASV 3.0 do not yet support getScreenTCM() on its SVG elements. Too bad, hopefully they will before Opera 9 is finally released. Anyway, if you have one of the above two configurations, you should be able to drag around the circle to your heart's content. What a blast...

Making It Useful

The problem came when I decided that I wanted to take this out of the 'simple demo phase' and into the 'practical use' phase. The first demo (dragtest.svg) only works with one SVG entity ("ball") and that entity has to be a <circle> element, since the JavaScript modifies the cx and cy attributes when the mouse moves. To make this useful outside of the laboratory, so to speak, requires that I generalize it for multiple entities and entity types.

Since I might want to use dragging on arbitrarily shaped entities, I cannot use a technique that modifies cx/cy attributes (this wouldn't work for <rect> or <g> entities). I already briefly mentioned that SVG allows you to arbitrarily transform your entities via the transform attribute. This is the general mechanism I decided to use to designate an entity's position:

I use a fixed shape (the "background" entity) to get the SVG document coordinate system and properly determine the mouse coordinates and offset within the shape, then I use the transform attribute to move the entities around. The transform attribute allows me to do this to any shape without using entity-specific attributes like cx or x. When I want to move the entity around I just do this:

DOM Sticking

But one issue did come up: How to efficiently get the element's current position? Looking at the above SVG code, it seems that I would have to get the value of the transform attribute (using the DOM getAttribute() method), then scan it looking for the two strings within the parentheses separated by a comma (or space), then parse those values into integers. What a pain.

So instead I decided to use a technique that I'm really growing to love in SVG DOM programming that I'll dub "DOM Sticking". It involves embedding arbitrary bits of information into the SVG entities themselves. It's best illustrated by modifying the above example SVG code:

In the above, I simply added the dragx and dragy attributes which are attributes invented by me that mean nothing to an SVG renderer. In other words, the software drawing the picture completely ignores these attributes, but I can use them in my DOM to ease matters. When I introduced these attributes, I made sure the dragx/dragy attributes have the same initial values as the transform translation.

Now whenever I move the elements, I need to update the dragx/dragy attributes at the same time:

But the benefit is that, since the dragx/dragy attributes are always in sync with the element's current translation, when I want to determine the SVG entity's current position I can just use:

No complicated and expensive scanning of the transform attribute, no delving into the element's CTM, just pick them up from the DOM and use them.

In using the above technique, it may be more proper to stick the dragx/dragy attributes into their own namespace (in which case I'd have to use getAttributeNS and setAttributeNS methods), but for the purposes of this demo it seems to work just fine. The reason for this is maybe because the SVG elements are in the SVG namespace but the attributes on those elements are in the null namespace.

Enabling ASV3

Subsequent to my first publishing this entry, I was informed that ASV 3 doesn't support getScreenCTM() and someone had already posted a function that would calculate this manually. Luckily I was able to find this function from Holger Will and with a small correction to his function to handle percentages in width/height - the function now works beautifully in ASV3.

Conclusion

You can see the final demo which allows you to drag around four objects here: Draggable SVG Demo Two. It supports IE+ASV3, IE+ASV6, and Firefox 1.5. Feel free to view the source and learn whatever you can. By the way, I came across this blog entry today so I thought I'd pick up his cool SVG feed icon and use it in my demo. Since Firefox doesn't allow me to specify an external SVG document, I embedded his SVG into my own code. Thanks, Marcus!

To make this demo perfectly reusable, I would probably change the following:

• Use a class attribute to specify that an SVG entity is draggable. i.e. <circle id='ball' class='draggable' ...>
• Then, remove the dragx/dragy attributes from my SVG code.
• Then, in my JavaScript init() function, scan for all SVG entities of the class 'draggable' and in addition to adding the event listener, I would parse their transform attributes to get their initial position, then add the dragx/dragy attributes from within the JavaScript at that stage.

The above changes would have the effect of allowing you to easily turn entities into draggable entities by simply adding class='draggable' to the SVG description - no other changes would be required but you still gain the convenience and speed of DOM Sticking.