Инспекция кода: drag and drop на svg

Здравствуйте! Вчера вечером задал вопрос, на который пока никто не ответил. Задача такая: перетаскивать карточки по заданным областям поля, если в данной области уже есть карточка, то та, которая перетягивалась, должна вернуться на свое место.

На свежую голову набросал такой код:

function card(x, y, name)
{
    var ret =   document.createElementNS("http://www.w3.org/2000/svg", "image");
    ret.setAttribute('x', x);
    ret.setAttribute('y', y);
    ret.setAttribute('href', name);
    ret.setAttribute('dragging', 'false')
    ret.setAttribute('onmousedown', 'startDrag(event, this)');
    ret.setAttribute('onmousemove', 'drag(event, this)');
    ret.setAttribute('onmouseup', 'stopDrag(event, this)');
    cards.push(ret);
    return ret;
}
canv.appendChild(card(0, 0, 'goblin.svg'));
canv.appendChild(card(cellSize+cellGap, cellSize+cellGap, 'orc.svg'));
function startDrag(ev, obj)
{
    var x = obj.getAttribute("x");
    var y = obj.getAttribute("y");
    obj.setAttribute("dragging", "true");
    obj.setAttribute("from", String(x)+" "+String(y));
    obj.setAttribute("last", String(ev.pageX)+" "+String(ev.pageY));
    obj.setAttribute("cp", String(ev.pageX-x)+" "+String(ev.pageY-y));
}
function drag(ev, obj)
{
    if(obj.getAttribute("dragging") !== "true")
        return;
    var last = obj.getAttribute('last').split(' ');
    var cp = obj.getAttribute('cp').split(' ');
    var x = obj.getAttribute('x');
    var y = obj.getAttribute('y');
    var dx = Number(last[0])-ev.pageX;
    var dy = Number(last[1])-ev.pageY;
    obj.setAttribute('x', Number(x)-dx);
    obj.setAttribute('y', Number(y)-dy);
    obj.setAttribute('last', String(ev.pageX)+" "+String(ev.pageY));    
}
function stopDrag(ev, obj)
{
    obj.setAttribute("dragging", "false");
    var found = false;
    var cp = obj.getAttribute('cp').split(' ');
    var x = Math.floor((Number(obj.getAttribute('x'))+Number(cp[0]))/(cellSize+cellGap))*(cellSize+cellGap);
    var y = Math.floor((Number(obj.getAttribute('y'))+Number(cp[1]))/(cellSize+cellGap))*(cellSize+cellGap);
    for(var i=0; i<cards.length; i++)
    {
        if(cards[i].getAttribute('x') == x && cards[i].getAttribute('y') == y)
        {
            found=true;
            break;
        }
    }
    if(!found)
    {
        obj.setAttribute('x', x);
        obj.setAttribute('y', y);
    }
    else
    {
        var from = obj.getAttribute('from').split(' ');
        obj.setAttribute('x', from[0]);
        obj.setAttribute('y', from[1]);
    }
}

Код рабочий.

Вопросы:

• если перетягивать карточку очень быстро, она сначала отстает от курсора, а потом останавливается. Как от этого можно избавиться?

• можно ли вообще хранить какие-то данные в атрибутах, и, если нет, то почему?

• нельзя ли сделать все это как-нибудь попроще?