Skip to main content
adicionou 401 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

O teu código só está a adicionar um event handler ao elemento circle, tens de adaptar para os elementos rect também.

Podes fazer isso assim:

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

(ou podias usar delegação como no exemplo no final da resposta)

Depois tens de resolver outro problema, as cooredenadas. No setter e no getter uma vez que elementos rect tem x e y, mas elementos circle têm cx e cy.

Aqui fica uma sugestão:

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/

Podes mesmo fazer isto com delegação (via event.target) e assim nem precisas do ciclo for. Neste exemplo em baixo uso .id para decidir se o elemento pode ser movido ou não (assumindo que elementos com ID podem ser movidos), mas podias fazer isso com uma classe ou data- field.

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

O teu código só está a adicionar um event handler ao elemento circle, tens de adaptar para os elementos rect também.

Podes fazer isso assim:

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

Depois tens de resolver outro problema, as cooredenadas. No setter e no getter uma vez que elementos rect tem x e y, mas elementos circle têm cx e cy.

Aqui fica uma sugestão:

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/

O teu código só está a adicionar um event handler ao elemento circle, tens de adaptar para os elementos rect também.

Podes fazer isso assim:

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

(ou podias usar delegação como no exemplo no final da resposta)

Depois tens de resolver outro problema, as cooredenadas. No setter e no getter uma vez que elementos rect tem x e y, mas elementos circle têm cx e cy.

Aqui fica uma sugestão:

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/

Podes mesmo fazer isto com delegação (via event.target) e assim nem precisas do ciclo for. Neste exemplo em baixo uso .id para decidir se o elemento pode ser movido ou não (assumindo que elementos com ID podem ser movidos), mas podias fazer isso com uma classe ou data- field.

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

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

O teu código só está a adicionar um event handler ao elemento circle, tens de adaptar para os elementos rect também.

Podes fazer isso assim:

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

Depois tens de resolver outro problema, as cooredenadas. No setter e no getter uma vez que elementos rect tem x e y, mas elementos circle têm cx e cy.

Aqui fica uma sugestão:

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/