title: unable to move fabricjs object
body: <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 canvas = new fabric.Canvas('canvas');
  canvas.selection = false;
  var circle = new fabric.Circle({
      left: 150,
      top: 150,
      radius: 50,
      originX: 'center',
      originY: 'center',
      selectable: false
  });
  canvas.add(circle);
  circle.on('mousedown',function(){
   console.log('down')
   circle.set({
    selectable: true
   })
   canvas.renderAll();
  })
  circle.on('mouseout',function(){
   console.log('out')
    circle.set({
    selectable: false
   })
   canvas.renderAll();
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 2px dotted green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to make object <code>selectable</code> on mouse down, and on mouse out i want to make <code>not selectable</code>. If I click inside and dragging its not moving. But if i click inside more than two times, its working. But I want to make this work clicking once. How to achieve the same?</p>
  
  <p>--Update--</p>
  
  <p>As suggested by @AndreaBogazzi, it will work for mouesmove in desktop, but the same won't work for touch devices as only touch start will work if I touch on object.</p>