Hi. I have recently been going through the whole drag and drop problem, exacerbated by viewBox, zoom and pan. I am surprised no one I have found through google has posted an air tight cross browser solution since it appears to be a common interest.
So, I cobbled together different bits and pieces from different sources and smooshed them with my own code to get it to work. I would give you my resulting code but it's nasty as for every change to the SVG document I must make a corresponding change via AJAX to a MySQL representation of what is essentially a component based CAD design. And, elements can be "dragged" off of the parent HTML onto the SVG document. What I can do is point out some decent references for getting going, by way of thanks to these folks who have helped me as well. Here they are: 1. A fellow Kevin Lindsey knows what he's doing. His site is full of useful info. In particular I used http://www.kevlindev.com/tutorials/basics/transformations/tracker/index.htm which shows how to accurately track and convert mouse coordinates to user coordinates in consideration of viewBox, pan and zoom. It also uses an opacity="0" rect to track all of this - nifty. 2. To drag and drop, I have attached the onmousedown events to group elements in the SVG. That way the tracking rect can have mouse events turned OFF for it until a moveable element is clicked upon. At that point: turn on mouse events for the tracking rect, move (appendChild) the dragged element to the "top" of the order and turn off mouse events to the dragged element. On drop, do the reverse. 3. Here is a good drag and drop implementation: http://svg-whiz.com/svg/DragAndDrop.svg It does not take into account viewBox zoom and pan. You need to modify it to take into account as per the above. 4. Finally the folks at http://www.carto.net/papers/svg/samples/ have made and compiled tons of useful SVG info. That's it. Stephen --- In [email protected], "a30blows" <[EMAIL PROTECTED]> wrote: > > From my recent digging, when you select an element to be dragged > (DragTarget), try: > > > // move this element to the "top" of the display, so it is (almost) > // always over other elements > DragTarget.parentNode.appendChild( > DragTarget ); > > AND > > // turn off all pointer events to the dragged element, this does 2 things: > // 1) allows us to drag text elements without selecting the text (if > it is text) > // 2) allows us to find out where the dragged element is dropped > DragTarget.setAttributeNS(null, 'pointer-events', 'none'); > > > Remember to turn the pointer event back on after the drop. > > > Stephen > > --- In [email protected], "simonshutter" <simon@> wrote: > > > > David and Andre, > > > > Thanks for the feedback. I'm still doing some testing but for > > whatever reason I'm not getting the results I was hoping for so now > > looking at coding the events differently in my file. > > > > Simon > > > > > > --- In [email protected], "ddailey" <ddailey@> wrote: > > > > > > Simon, I haven't looked at your code to see what might be causing > > the trouble, but here is something that allows the dragging around of > > several objects of differing types, including groups with rect and > > text, that is working in O, F and I. > > > > > > One thing to be aware of is the difference between evt.target and > > evt.currentTarget. > > > > > > http://srufaculty.sru.edu/david.dailey/svg/drag.svg > > > > > > Hope it is helpful. > > > > > > David > > > > > > ----- Original Message ----- > > > From: simonshutter > > > To: [email protected] > > > Sent: Monday, March 12, 2007 4:14 PM > > > Subject: [svg-developers] Event model differences between browsers > > > > > > > > > Hi folks, > > > > > > I have an SVG doc which includes some paired SVG text and rect > > > elements. My goal is for the user to click on a text element and, > > as > > > the mouse is moved up or down, a clone of the corresponding rect > > > element will move with it. > > > > > > see: http://www.schemax.com/test/host.htm > > > > > > What I am currently seeing is three different behaviours > > exhibited by > > > IE7/ASV3, FF2 and Op9. > > > > > > IE7/ASV3 - appears to work as intended > > > > > > FF2 - works as intended except if the pointer enters another text > > > element (thereby leaving the parent) the parent's mouse out event > > > fires and the clone is dropped. > > > > > > Op9 - as soon as the pointer leaves the text element the clone is > > > dropped (although the parent event does not appear to fire) > > > > > > Can anyone suggest a better event implementation pls? > > > > > > Tx, Simon > > > > > > > > > > > > > > > > > > [Non-text portions of this message have been removed] > > > > > > ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
