Issue with vertical drap&drop in Firefox on an SVG / jQuery element

by nhoizey

HTML

<a id="info" href="http://nhoizey.github.com/tests/svg_jq_dd/">Some explanations here…</a>

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="board" viewBox="0 0 320 480" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
  <defs>
    <symbol id="piece1"><image xlink:href="http://nhoizey.github.com/tests/svg_jq_dd/m1.svg" width="32" height="32" /></symbol>
  </defs>
</svg>

CSS

html, body {
   color:  #000;
   background-color: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 #info {
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

var dragged = false,
    cursorY = 0;

function xToSvg(x) {
    return (x - 1) * 32;
}

function yToSvg(y) {
    return 480 - 32 * y;
}

function svgToY(coordY) {
    return (480 - coordY) / 32;
}

function pixelsToSvgY(coordY) {
    return coordY * 480 / $(document).height();
}

function drawPiece(x, y, pieceType, pieceId) {
    var piece = $(document.createElementNS("http://www.w3.org/2000/svg", "use")).attr({
        x: x,
        y: y
    });
    if (pieceId !== undefined) {
        piece.attr({
            id: pieceId
        });
    }
    piece.get(0).setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + pieceType);
    $("#board").append(piece);
    return piece;
}

drawnCurrentPiece = drawPiece(xToSvg(8), yToSvg(8), 'piece1', 'playable');

$("#board").on('mousemove', function(event) {
    event.preventDefault();
    if (dragged) {
        cursorY = pixelsToSvgY(event.pageY) - 16;
        drawnCurrentPiece.attr({
            y: cursorY
        });
    }
});
$("#board").on('mouseup', function(event) {
    event.preventDefault();
    if (dragged) {
        dragged = false;
        cursorY = Math.round((pixelsToSvgY(event.pageY) - 16) / 32) * 32;
        drawnCurrentPiece.attr({
            y: cursorY
        });
        console.log('# Dropped here: ' + svgToY(cursorY));
    }
});
drawnCurrentPiece.on('mousedown', function(event) {
    event.preventDefault();
    dragged = true;
    cursorY = pixelsToSvgY(event.pageY) - 16;
    drawnCurrentPiece.attr({
        y: cursorY
    });
});