SVG: drag and drop

Hi,

I am using the next functions to do some drag and drop of svg elements:

function down(evt) {
if ( !drag ) {
drag = true;
dragObject = evt.getTarget();
dragStartX = evt.getClientX();
dragStartY = evt.getClientY();
objPosX = parseInt(dragObject.getAttribute("x"));
objPosY = parseInt(dragObject.getAttribute("y"));
move(evt);
}
}

function move(evt) {
if ( drag ) {
dragEndX = evt.getClientX();
dragEndY = evt.getClientY();
shiftX = dragEndX - dragStartX;
shiftY = dragEndY - dragStartY;
dragObject.setAttribute("x", objPosX + shiftX);
dragObject.setAttribute("y", objPosY + shiftY);
}
}

function up(evt) {
drag = false;
}

the problem is now: whenever i move the mouse too fast, the pointer shifts off the element and there is no target element anymore for the move-event, so the element which was dragged is left on the drawing board. When i release the mouse button, the variable drag is not set to false, because when i move over the previously dragged element the pointer is attached again and i can proceed the dragging. How can i help this, how can i make sure the drag is completed when i move the mouse too fast?

IE has had this problem for the longest time (I'm assuming you are using IE + Adobe plugin).

Easy solution?

theEventtarget.ownerSVGDocument.attachEvent('onmousemove', myMoveHandler);

Or if the Adobe plugin exposes a DOM2 Events model:

theEventTarget.ownerSVGDocument.addEventListener('mousemove', moveHandler, false);

You basically attach the move handler to the document, as opposed to the element.