通过拖动键和箭头键移动svg元素

Question

我目前正在开发一个项目，我将svg文本元素放在模板上的一个组中。我需要用户拖动元素（我已经工作）并通过箭头键移动SELECTED元素。下面的代码是我现在已经工作了一段时间，并且元素似乎一次向右和向下跳几个像素。有些事情是不对的。谁能帮我这个？谢谢！

function drag(r) {
 r.drag(move, start, stop);         
}

var move = function() {
 this.attr({style:'cursor: grabbing;'});        
}

var start = function() {

}

var stop = function() {
 this.attr({style:'cursor: pointer;'}); 
 xyc(this);
}

function xyc(svg){
 var bb = svg.getBBox();
 console.log('New: x: ' + bb.x + ' y: '+ bb.y);
 keymove(svg,bb.x,bb.y);
}

function keymove(g,bx,by) {
console.log('New: x: ' + bx + ' y: '+ by);
 $(document).keydown(function(e){
     e.preventDefault();

    if(e.keyCode == 39) {//right
        g.attr('kx', bx+=1);
        g.attr('ky', by);
        g.attr({transform:'translate('+ g.attr('kx') + ',' +   g.attr('ky') + ')'});
        xyc(g);             
    }else if(e.keyCode == 37) {//left
        g.attr('kx', bx-=1);
        g.attr('ky', by);
        g.attr({transform:'translate('+ g.attr('kx') + ',' +  g.attr('ky') + ')'});
        xyc(g);
    }       
    else{
        return; 
    }
    });
}