Hi fireball, Jonathan has the right of it. You need a glass pane to make dragging work at all. You might be interested in looking at the samples/solitaire directory which does card dragging along these lines.
On Sat, Aug 4, 2012 at 3:30 PM, jonathan wood <jonathanshaww...@gmail.com>wrote: > I've found it best to handle mousedown on the element being dragged, then > track all mm/mu on a glasspane above the elements to be dragged. > > here's a very simple example in svg: > > <?xml version="1.0" encoding="UTF-8" standalone="no" ?> > <svg version="1.1" width="100%" height="100%" xmlns=" > http://www.w3.org/2000/svg" onload="init()" pointer-events="all"> > <script type="text/ecmascript"> > <![CDATA[ > var drag = false; > var svg; > var draggable; > > function init(e) { > svg = document.documentElement; > var rect = document.getElementById("draggable"); > rect.addEventListener("mousedown", md, false); > svg.addEventListener("mousemove", mm, false); > svg.addEventListener("mouseup", mu, false); > } > > function md(e) { > drag = true; > draggable = e.currentTarget; > } > > function mu(e) { > drag = false; > } > > function mm(e) { > if (drag) { > var p = getPoint(e); > var m = svg.createSVGMatrix().translate(p.x, p.y); > var transform = "matrix(" + m.a + " " + m.b + " " + m.c + > " " + m.d + " " + m.e + " " + m.f + ")"; > draggable.setAttributeNS(null, "transform", transform); > } > } > > function getPoint(e) { > var p = svg.createSVGPoint(); > p.x = e.clientX; > p.y = e.clientY; > p = p.matrixTransform(svg.getScreenCTM().inverse()); > return p; > } > ]]> > </script> > <rect id="background" x="0" y="0" width="100%" height="100%" > fill="#BBB" stroke="#000" /> > <rect id="draggable" x="0" y="0" height="100" width="100" > fill="cornflowerblue"/> > </svg> > > > On Sat, Aug 4, 2012 at 11:48 AM, fireball <samiib...@hotmail.com> wrote: > >> I have two issues actually, one major and one minor. >> >> Major: I can't drag shapes over others. I have to drag them around for it >> to >> work. Note that when I go back to the shape, the handle is still there and >> the shape will continue moving without re-clicking. >> Does it have to do with the way I add shapes to the DOM document or the >> way >> I handle the dragging, or is it both, or is it something else? >> >> Minor: Moving mouse too fast after a mousedown loses the shape (shape >> stops >> moving) but when I go back to it the handle is still there and the shape >> keeps moving with the mouse without re-clicking on it. Same behaviour as >> in >> the major case above. What would be the cause? >> >> I register a handler object which listens to mousedown, mousemove, and >> mouseup for any object that is draggable. I do keep track of initial >> points >> to re-adjust the position. Something similar to >> http://wiki.apache.org/xmlgraphics-batik/DragTutorial >> >> Please let me know if you need to see any code for more info. >> >> Thanks, >> >> fireball. >> >> >> >> -- >> View this message in context: >> http://batik.2283329.n4.nabble.com/Issue-with-dragging-shapes-tp4655175.html >> Sent from the Batik - Users mailing list archive at Nabble.com. >> >> --------------------------------------------------------------------- >> To unsubscribe, e-mail: batik-users-unsubscr...@xmlgraphics.apache.org >> For additional commands, e-mail: batik-users-h...@xmlgraphics.apache.org >> >> >