javascript - Fabric.js - Move object without holding mouse button -

in fabric.js object can moved in canvas left-clicking, holding , moving mouse. in condition, selected object follows mouse's cursor , object:moving gets fired. releasing left mouse button exits mode.

is there way change behavior , have object enter mode different events? example, click once have object follow cursor (and have object:moving fire correctly) , click second time release object in it's final position?

i'm hoping avoid writing scratch listening "mouse move" event, given implemented, triggers enter/exist mode have changed.

i implemented having variable called movedobject null if no object moved , contains object if object is moved. if click while object being moved it'll set movedobject null. if click while not moving object it'll set movedobject object if clicked one.

i added listener mouse:move sets left , top of movedobject mouse x , y (minus movedobject width , height / 2) if movedobject not null.

jsfiddle

code:

var canvas = new fabric.canvas('canvas'); canvas.setwidth(300); canvas.setheight(300); var circle = new fabric.circle({   radius: 30,   fill: '#f55',   top: 100,   left: 100 }); canvas.add(circle); circle.hascontrols = circle.hasborders = circle.selectable = false;  var movedobject = null; canvas.on({   'mouse:down': function(e) {     //if object selected it'll unselected     if (movedobject !== null) {         movedobject = null;     } else {       //if no object selected , click occured on object it'll selected       if (e.target) {          movedobject = e.target;       }     }   },   'mouse:move': function(e) {     //moving object along mouse cursor     if (movedobject !== null) {         movedobject.left = (e.e.clientx - movedobject.width / 2);         movedobject.top = (e.e.clienty - movedobject.height / 2);         movedobject.setcoords();         canvas.renderall();     }   } });