Re: Issue with dragging shapes

[jonathan wood]

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
>
>