title: Snap.svg - drag event handler
body: <p>Question is about the onstart event handler for <a href="http://snapsvg.io/docs/#Element.drag" rel="noreferrer">Element.drag</a> in the newly announced <a href="http://snapsvg.io/" rel="noreferrer">Snap.svg</a>.</p>
  
  <p>The intention of the code below is to register event handlers for the start and stop of a drag (onstart/onstop) on an svg object.</p>
  
  <pre><code>        var s = Snap(800,600);
  
          var bigCircle = s.circle(300,150,100);
  
          bigCircle.drag(null,
                  function(){
                      console.log("Move started");
                  },
                  function(){
                      console.log("Move stopped");
                  }
          );
  </code></pre>
  
  <p>The console messages work fine on drag start and stop, but the null overrides the default onmove function - resulting in no actual drag happening. How do I pass something that says "I don't want to mess with the default onmove"? </p>
  
  <p>(Note: I'd prefer to register an event handler by means of assignment, like the familiar onClick, but that's a different matter.)</p>
  
  <hr>
  
  <p>Note added after few hours:
  The Raphael.js documentation and examples provide some clues. At least now I know how to pass in a proper function for onmove that provides the default move behavior: </p>
  
  <pre><code>        var s = Snap(800,600);
  
          var bigCircle = s.circle(300,150,100);
  
          start = function() {
              this.ox = parseInt(this.attr("cx"));
              this.oy = parseInt(this.attr("cy"));
              console.log("Start move, ox=" + this.ox + ", oy=" + this.oy);
          }
  
          move = function(dx, dy) {
              this.attr({"cx": this.ox + dx, "cy": this.oy + dy});
          }
  
          stop = function() {
              this.ox = parseInt(this.attr("cx"));
              this.oy = parseInt(this.attr("cy"));
              console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);
          }
  
          bigCircle.drag(move, start, stop);
  </code></pre>