title: Move (drag/pan) and zoom object (image or div) in pure js
body: <p>I'm working on a little script that makes an object (div or img) moveable and zoomable within a given frame.</p>
  
  <p>However I came across a few problems I'm not really sure of, because I'm a javascript beginner - so explanation of why those problems occure would be appreciated.</p>
  
  <p>Problems:</p>
  
  <ol>
  <li>Calling the functions <code>start_drag()</code>, <code>while_drag()</code> and <code>stop_drag()</code> returns <code>undefined</code> - why is that? What should be returned?</li>
  <li>The dragging and moving of the image does not work correctly - instead of clicking the mousebutton down and starting to move the image around, I have to click once and then start moving. Although I bound the <code>mousedown</code> event to the image. What did I do wrong?</li>
  <li>Why is the moving part not working on mobile (the zooming works!)?</li>
  </ol>
  
  <p>Please see my fiddle: <a href="https://jsfiddle.net/pow4ngbw/15/" rel="noreferrer">https://jsfiddle.net/pow4ngbw/15/</a></p>