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


No announcement yet.

SVG: drag and drop

  • Filter
  • Time
  • Show
Clear All
new 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?
    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.