Comments on: How To Enable Dragging in SVG http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/ Tue, 17 Jan 2012 21:56:44 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Marko Matic Cipi http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-147345 Marko Matic Cipi Mon, 11 Apr 2011 10:22:35 +0000 http://blog.codedread.com/?p=194#comment-147345 DAAAAAMN!!! xD Works with jQuery SVG perfectly!!! THANX MAN! :D DAAAAAMN!!! xD Works with jQuery SVG perfectly!!! THANX MAN! :D

]]> By: Helder Magalhães http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-290 Helder Magalhães Fri, 14 Mar 2008 10:24:10 +0000 http://blog.codedread.com/?p=194#comment-290 I've just had a look and the implementation for getScreenCTM in ASV3 seems to work OK. :-) Kind of slow though... :-| Just a tip: that part of the code has no semicolons ending JS instructions. This may become an issue if someone runs a JS minifier on the script. ;-) I’ve just had a look and the implementation for getScreenCTM in ASV3 seems to work OK. :-) Kind of slow though… :-|

Just a tip: that part of the code has no semicolons ending JS instructions. This may become an issue if someone runs a JS minifier on the script. ;-)

]]> By: Alex http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-289 Alex Wed, 08 Aug 2007 16:05:36 +0000 http://blog.codedread.com/?p=194#comment-289 I found out what I did wrong. I changed "if (ball)" in the init() function to "if (evt.target == ball)"... It's not the target anymore once the mouse pointer leaves it... got it :) I found out what I did wrong. I changed “if (ball)” in the init() function to “if (evt.target == ball)”… It’s not the target anymore once the mouse pointer leaves it… got it :)

]]> By: Jeff Schiller http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-288 Jeff Schiller Wed, 25 Jul 2007 23:45:32 +0000 http://blog.codedread.com/?p=194#comment-288 Alex, Thinking about it a little more - I may have updated the JavaScript dragging library many months after posting this article to use the technique I describe above of "remembering" the entity at the start of the drag... Jeff Alex,

Thinking about it a little more – I may have updated the JavaScript dragging library many months after posting this article to use the technique I describe above of “remembering” the entity at the start of the drag…

Jeff

]]> By: Jeff Schiller http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-287 Jeff Schiller Wed, 25 Jul 2007 23:34:49 +0000 http://blog.codedread.com/?p=194#comment-287 Hi Alex, I'm glad you liked this tutorial - it's a little old now, but I'm happy someone is lookign at it. You pose an interesting question and I suppose the glib response would be that the SVG renderers need to get much faster. What I did here though was upon mousedown is track the target (i.e. the entity that was clicked upon and then only clear that when mouseup occurs. Then, during mousemove, if we've been dragging an entity, we know exactly which one. See the script that deals wtih the variable "draggingElement" in my code and where it gets set (the mousedown/mouseup event handlers). Hi Alex,

I’m glad you liked this tutorial – it’s a little old now, but I’m happy someone is lookign at it.

You pose an interesting question and I suppose the glib response would be that the SVG renderers need to get much faster. What I did here though was upon mousedown is track the target (i.e. the entity that was clicked upon and then only clear that when mouseup occurs. Then, during mousemove, if we’ve been dragging an entity, we know exactly which one. See the script that deals wtih the variable “draggingElement” in my code and where it gets set (the mousedown/mouseup event handlers).

]]> By: Alex http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-286 Alex Wed, 25 Jul 2007 23:29:31 +0000 http://blog.codedread.com/?p=194#comment-286 Thank you for a great tutorial. I'm just learning JavaScript, and this was very helpful. One question I have about these examples is, how do you make the dragged shapes follow the mouse pointer without "falling off?" For example, I have modified the code from your first example (which used a circle) to use a semi-opaque rect. When I drag the rect around, inevitably the mouse pointer leaves its perimeter, caused I assume by the SVG renderer being too slow to keep up with fast drags. The mouse pointer then "loses" the rect and I have to start the drag again, making sure to drag slowly or risk losing my "grip" on it. The shapes in your examples, by comparison, act like they are attached to the mouse pointer with rubber bands - which is ideal. Thank you for a great tutorial. I’m just learning JavaScript, and this was very helpful. One question I have about these examples is, how do you make the dragged shapes follow the mouse pointer without “falling off?” For example, I have modified the code from your first example (which used a circle) to use a semi-opaque rect. When I drag the rect around, inevitably the mouse pointer leaves its perimeter, caused I assume by the SVG renderer being too slow to keep up with fast drags. The mouse pointer then “loses” the rect and I have to start the drag again, making sure to drag slowly or risk losing my “grip” on it. The shapes in your examples, by comparison, act like they are attached to the mouse pointer with rubber bands – which is ideal.

]]> By: Jeff Schiller http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-285 Jeff Schiller Wed, 23 Aug 2006 21:01:46 +0000 http://blog.codedread.com/?p=194#comment-285 Ruud, I don't have a lot of time right now but I might get around to this. If you have some time, you can take the version at http://www.codedread.com/dragsvg.js (search for getScreenCTM function). This was tweaked by Johan Sundstrom and myself. Free to use and modify as long as you credit, no warranties, blah blah blah ;) Regards, Jeff Ruud,

I don’t have a lot of time right now but I might get around to this. If you have some time, you can take the version at http://www.codedread.com/dragsvg.js (search for getScreenCTM function). This was tweaked by Johan Sundstrom and myself. Free to use and modify as long as you credit, no warranties, blah blah blah ;)

Regards,
Jeff

]]> By: Jeff Schiller http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-284 Jeff Schiller Mon, 31 Jul 2006 16:48:31 +0000 http://blog.codedread.com/?p=194#comment-284 As I mentioned, the SVG DOM allows you to define your own attributes as you like on SVG entities. As for a separate schema, well I guess you'd have to start with the SVG DTD and add your stuff on top. I'm not familiar enough with DTD to say how easy this is though... As I mentioned, the SVG DOM allows you to define your own attributes as you like on SVG entities. As for a separate schema, well I guess you’d have to start with the SVG DTD and add your stuff on top. I’m not familiar enough with DTD to say how easy this is though…

]]> By: Craig http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-283 Craig Mon, 31 Jul 2006 09:14:35 +0000 http://blog.codedread.com/?p=194#comment-283 Is it possible to define additional attributes in a seperate or extendede schema? Quote: 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. Is it possible to define additional attributes in a seperate or extendede schema?

Quote:

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.

]]> By: jastarafie http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/comment-page-1/#comment-282 jastarafie Wed, 08 Mar 2006 17:18:07 +0000 http://blog.codedread.com/?p=194#comment-282 Hey there, great article... I used it for displaying the x and y position of the mouse when hovering over a .svg file. The only thing that's not working fine, is the performance. It takes up to 5 seconds to update the coordinates, and not smootly like your example. I was wondering if you maybe know what the problem is? I putted the .js code in seperate file, which is used by a .php file to generate the xml/svg. Running apache2 + php5 Thanx in advance and sorry for the bad language... Hey there, great article… I used it for displaying the x and y position of the mouse when hovering over a .svg file.
The only thing that’s not working fine, is the performance. It takes up to 5 seconds to update the coordinates, and not smootly like your example.
I was wondering if you maybe know what the problem is?
I putted the .js code in seperate file, which is used by a .php file to generate the xml/svg.
Running apache2 + php5

Thanx in advance and sorry for the bad language…

]]>