4

Estou a mover uma imagem com o rato(mouse). Quando utilizo o Chrome funciona perfeitamente. Mas quando utilizo o browser Firefox, ao mover a imagem aparece o ícone de proibição no rato, e o mover é diferente. Como posso resolver isso?

Exemplo: http://jsfiddle.net/g50L96e7/4/

2
  • Evento MOUSEUP não está sendo chamado no Firefox ao soltar o mouse, só está chamando ao clicar. Commented 24/03/2015 às 17:16
  • Utilize esse site para verificar a compatibilidade nos navegadores: caniuse.com Commented 25/03/2015 às 1:48

1 Resposta 1

4

Adicione e.preventDefault() em todos os eventos de mouse, assim o comportamento padrão do navegador será suprimido com certeza.

Existe um bug no Firefox acerca disto.

Assim funciona (jsfiddle):

var svg = document.querySelector('svg');

//create circle
var shape = document.createElementNS(
    "http://www.w3.org/2000/svg", "circle");

svg.appendChild(shape);
svg.addEventListener('mousedown', mousedown);
var ddData = {
    element: null,
    initialX: 0,
    initialY: 0,
    originalX: 0,
    originalY: 0
};



//start move    
function mousedown(e) {
    e.preventDefault();
    var evt = e || window.event;
    ddData.element = evt.target || evt.srcElement;
    if (!ddData.element.id) return ddData.element = null;
    ddData.initialX = evt.clientX;
    ddData.initialY = evt.clientY;
    ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName == 'image' ? 'x' : 'cx'));
    ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName == 'image' ? 'y' : "cy"));
};

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

svg.onclick = function (e) {
    var name = this.id;
    var el = e.target;
    var x = el.getAttributeNS(null, "x");
    var y = el.getAttributeNS(null, "y");
    alert(x);
};

//stops drag movement
svg.onmouseup = function (e) {
    e.preventDefault();
    debugger;
    var evt = e || window.event;
    ddData.element = null;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .