Move object without holding mouse button

Apr 09, 2018

Hi friends Is there a way to Move object without holding mouse button in a way selected object follows the mouse's cursor then Releasing by left mouse button.

any help or guidance would be appreciated

I found this js code but I do not know how to call in the storyline:

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 an object is selected already it'll be unselected
if (movedObject !== null) {
movedObject = null;
} else {
//If no object was selected and a click occured on an object it'll now be selected
if (e.target) {
movedObject = e.target;
}
}
},
'mouse:move': function(e) {
//Moving the object along with 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();
}
}
});

//and this//

var mydragging = false;
canvas.on('mouse:up', function(o) {
if (mydragging) {
mydragging = false;
canvas.currentTransform = null;
}
else {
canvas._setupCurrentTransform(o.e, o.target);
mydragging = true;
}
});
Be the first to reply

This discussion is closed. You can start a new discussion or contact Articulate Support.