In my mouse:down event listener under certain conditions I want to deactivate the object that user just activated with mouse:down. In other words when user tries to drag an object in some cases I want to execute some code and prevent the dragging.
Simply calling
fabric.deactivateAll();
will deselect the object (object control disappears) but the dragging functionality will be uninterrupted.
I tried to:
fabric.fire('mouse:up');
to simulate user letting go of object and it fires but it has no effect on dragging.
How can I programmatically disable dragging? Also how would I active it on another object if the two methods are not the same?
Context: I have a group of objects that user can manipulate normally. However there is one special object in that group in that when user tries to drag by clicking on that special object it should be removed from group, added to canvas and the dragging should be applied to special object instead of entire group. After the special object is deselected it gets added to group again. I have everything working except the part where dragging functionality is transferred from entire group to special object.
In my mouse:down event listener under certain conditions I want to deactivate the object that user just activated with mouse:down. In other words when user tries to drag an object in some cases I want to execute some code and prevent the dragging.
Simply calling
fabric.deactivateAll();
will deselect the object (object control disappears) but the dragging functionality will be uninterrupted.
I tried to:
fabric.fire('mouse:up');
to simulate user letting go of object and it fires but it has no effect on dragging.
How can I programmatically disable dragging? Also how would I active it on another object if the two methods are not the same?
Context: I have a group of objects that user can manipulate normally. However there is one special object in that group in that when user tries to drag by clicking on that special object it should be removed from group, added to canvas and the dragging should be applied to special object instead of entire group. After the special object is deselected it gets added to group again. I have everything working except the part where dragging functionality is transferred from entire group to special object.
Share Improve this question edited Jan 13, 2016 at 17:52 Pirs01 asked Jan 13, 2016 at 17:46 Pirs01Pirs01 1351 gold badge2 silver badges10 bronze badges2 Answers
Reset to default 12I made a JSFiddle in which an object that is dragged is stopped after 500 milliseconds. You can set rect.lockMovementX = true; and rect.lockMovementY = true; to stop dragging and set them false to allow dragging again.
Regarding your need to only apply it to certain objects: just add a stopDragging variable, which has true as value for the objects that you want to stop dragging, false for the ones you don't want to stop dragging. Then check in the onMoving function whether or not e.target.stopDragging is true or false.
(function() {
var canvas = new fabric.Canvas("canvas");
fabric.Object.prototype.transparentCorners = false;
var rect = new fabric.Rect({
width: 100,
height: 100,
top: 100,
left: 100,
fill: 'rgba(255,0,0,0.5)'
});
canvas.add(rect);
var timeoutTriggered = false;
function stopDragging(element) {
element.lockMovementX = true;
element.lockMovementY = true;
}
function onMoving(e) {
if (!timeoutTriggered) {
setTimeout(function() {
stopDragging(e.target);
}, 500);
timeoutTriggered = true;
}
}
canvas.on({
'object:moving': onMoving
});
})();
I was looking for the same solution. I had a discussion with a fabricjs dev that this will lead to bad ux-experience on smartphones.
Instead I do animate now that the block moves itself back to a valid position.