Web Analytics Made Easy -
StatCounter SVG: drag and drop - CodingForum

Announcement

Collapse
No announcement yet.

SVG: drag and drop

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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?
    I am the luckiest man in the world

  • #2
    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.
    jasonkarldavis.com

    Comment

    Working...
    X