title: YES/NO - is there a way to improve mouse dragging with pure SVG tools?
body: <p>So I was spending some time playing around with pure (no external libraries) SVG elements dragging.</p>
  
  <p>In general all works, but there is this nasty issue for fast moving mouse:
  - when user mousedowns a draggable SVG element close to its edge
  - then drags (mousemove) such draggable too fast
  - the mouse "loses" the draggable</p>
  
  <p>Here the issue is described in more details:
  <a href="http://www.svgopen.org/2005/papers/AdvancedMouseEventModelForSVG-1/index.html#S3.2" rel="nofollow noreferrer">http://www.svgopen.org/2005/papers/AdvancedMouseEventModelForSVG-1/index.html#S3.2</a>
  Also here the author tried to fix UX by leveraging mouseout event:
  <a href="http://nuclearprojects.com/blog/svg-click-and-drag-object-with-mouse-code/" rel="nofollow noreferrer">http://nuclearprojects.com/blog/svg-click-and-drag-object-with-mouse-code/</a></p>
  
  <p>I copied the above code snippet here: <a href="http://codepen.io/cmer41k/pen/zNGwpa" rel="nofollow noreferrer">http://codepen.io/cmer41k/pen/zNGwpa</a></p>
  
  <p><strong>The question I have is:</strong></p>
  
  <p>Is there no other way (provided by pure SVG) to prevent such "loss" of SVG element while mouse moves too fast?</p>
  
  <p>My attempt to solve this was:
  - detect (somehow) that mouseout event happened without finishing the dragging.
  - and if so (we sort of detected "disconnect") - reconnect the SVG element with current mouse position.</p>
  
  <p><strong>Is there a reason why this wouldn't work?</strong></p>
  
  <p>Code:</p>
  
  <p></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var click=false; // flag to indicate when shape has been clicked
      var clickX, clickY; // stores cursor location upon first click
      var moveX=0, moveY=0; // keeps track of overall transformation
      var lastMoveX=0, lastMoveY=0; // stores previous transformation (move)
      function mouseDown(evt){
          evt.preventDefault(); // Needed for Firefox to allow dragging correctly
          click=true;
          clickX = evt.clientX; 
          clickY = evt.clientY;
          evt.target.setAttribute("fill","green");
      }
  
      function move(evt){
          evt.preventDefault();
          if(click){
              moveX = lastMoveX + ( evt.clientX – clickX );
              moveY = lastMoveY + ( evt.clientY – clickY );
  
              evt.target.setAttribute("transform", "translate(" + moveX + "," + moveY + ")");
          }
      }
  
      function endMove(evt){
          click=false;
          lastMoveX = moveX;
          lastMoveY = moveY;
          evt.target.setAttribute("fill","gray");
      }</code></pre>
  </div>
  </div>
  </p>