Hello and welcome to our community! Is this your first visit?
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
    Zwolle, The Netherlands
    Thanked 31 Times in 31 Posts

    SVG: drag and drop


    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"));

    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 is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    metro DC
    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