CODEWITHSUNDEEP
javascriptfirefoxsvg
whizzo
whizzo

Reputation: 75

Moving a SVG element in Firefox fails

I'm trying to move a box element in a SVG dragging with mouse. It works fine in Chrome/Chromium but in Firefox works the firsts moves but later fails. You can test the code in that site.

Is there any way to make it work in Firefox? Thanks.

The source:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Nodes</title>
        <script>
            'use strict';

            var node;
            var startX;
            var startY;

            function setup() {
                node = document.getElementById('node');
                node.addEventListener('mousedown', function(event) {
                    document.addEventListener('mousemove', move, false);
                    startX = event.clientX;
                    startY = event.clientY;
                }, false);
                node.addEventListener('mouseup', function() {
                    document.removeEventListener('mousemove', move, false);
                }, false);
            }

            function move(event) {
                var positionX = Number(node.getAttribute('x')) + event.clientX - startX;
                var positionY = Number(node.getAttribute('y')) + event.clientY - startY;
                node.setAttribute('x', positionX);
                node.setAttribute('y', positionY);
                startX = event.clientX;
                startY = event.clientY;
            }
        </script>
    </head>
    <body onload="setup();">
        <svg width="800" height="600">
            <rect width="800" height="600" fill="#444444"/>
            <rect id="node" x="368" y="268" width="64" height="64" rx="8" ry="8" fill="#222244"/>
        </svg>
    </body>
</html>

P.S. Sorry about my bad english.

Upvotes: 2

Views: 266

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

In the event handler for mouse down you must call preventDefault() i.e.

  node.addEventListener('mousedown', function(event) {
        event.preventDefault();
        document.addEventListener('mousemove', move, false);
        startX = event.clientX;
        startY = event.clientY;
    }, false);

This should be enough, if it isn't try adding event.preventDefault() calls to the other event handling functions i.e mousemove and mouseup.

Firefox has default handlers for some events and you don't want to use them in this case.

Upvotes: 3

Related Questions