{"id":194,"date":"2005-12-21T12:18:13","date_gmt":"2005-12-21T18:18:13","guid":{"rendered":"http:\/\/blog.codedread.com\/?p=194"},"modified":"2005-12-21T12:18:13","modified_gmt":"2005-12-21T18:18:13","slug":"how-to-enable-dragging-in-svg","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2005\/12\/21\/how-to-enable-dragging-in-svg\/","title":{"rendered":"How To Enable Dragging in SVG"},"content":{"rendered":"

SVG<\/abbr> 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. <\/p>\n

<\/object><\/div>\n

Introduction<\/h2>\n

If you are unfamiliar with SVG I would recommend checking out my two Kickstart tutorials here: One<\/a> and Two<\/a>. Furthermore, you can see many useful examples at SVGBasics<\/a>. 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.<\/p>\n

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<\/a>.<\/p>\n

SVG Events<\/h2>\n

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:<\/p>\n

\n

<script><![CDATA[
\nfunction buttonClick() {
\n  alert('Hello, world!');
\n}
\n]]><script><\/p>\n

<rect id='button' onclick='buttonClick()' ... \/><\/p>\n<\/div>\n

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.<\/p>\n

Dragging<\/h2>\n

Now that you understand how to hook up event handlers, the basics of a dragging operation are:<\/p>\n