Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 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?

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •