Move SVG objects

Question

I have 3 objects of type SVG rect. I want to move them with the mouse. The problem is that I can only move when I create the object dynamically in the Javascript code. If I create HTML inside SVG, I cannot move. Example:

http://jsfiddle.net/hL3wpup5/

Answer 1

Your code is only adding an Event Handler to the element circle, you have to adapt to the elements rect also.

You can do it like this:

var rects = document.querySelectorAll('rect');
for (var i = 0; i < rects.length; i++) {
    rects[i].addEventListener('mousedown', mousedown);
}
shape.addEventListener('mousedown', mousedown);

(or you could use delegation as in the example at the end of the reply)

Then you have to solve another problem, the co-ordinates. No Setter and in the getter since elements rect has x and y, but elements circle have cx and cy.

Here is a suggestion:

function mousedown(evt) {
    var evt = evt || window.event;
    ddData.element = this;
    ddData.initialX = evt.clientX;
    ddData.initialY = evt.clientY;
    ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, this.tagName == 'rect' ? 'x' : 'cx'));
    ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, this.tagName == 'rect' ? 'y' : "cy"));
};

svg.onmousemove = function (evt) {
    var evt = evt || window.event;
    var el = ddData.element;
    if (el) {
        var posX = ddData.originalX + evt.clientX - ddData.initialX;
        var posY = ddData.originalY + evt.clientY - ddData.initialY;
        if (el.tagName == 'rect') {
            //move object
            el.setAttributeNS(null, "x", posX);
            el.setAttributeNS(null, "y", posY);
        } else {
            el.setAttributeNS(null, "cx", posX);
            el.setAttributeNS(null, "cy", posY);
        }
    }
}

jsFiddle: http://jsfiddle.net/y2d5og5s/

You can really do this with delegation (via event.target) and so you don’t even need the cycle for. In this example in low use .id to decide whether the element can be moved or not (assuming that elements with ID can be moved), but you could do this with a class or data- field.

jsFiddle: http://jsfiddle.net/g50L96e7/