How to return dragged fa-surface back to its origin using famo/angular?

Question

Im using fa-draggable directive which works:

<fa-modifier fa-size="[90, 90]">
             <fa-draggable fa-pipe-from="item.handler"
                           fa-options="draggableOptions"
                           fa-pipe-to="item.handler">
                           <fa-surface fa-background-color="'#268bd2'"
                                       fa-pipe-to="item.handler">
                                        A
                           </fa-surface>
             </fa-draggable>
</fa-modifier>

And inside my controller I set:

$scope.draggableOptions = {
        xRange: [-4, 4],
        yRange: [-4, 4]
    };
$scope.item.handler = new EventHandler();
$scope.item.handler.on('end', function (e) {
                //return somehow to default position
            });

How can I assure that after drag event is done, the draggable surface is returned to default position?

I found this question Drag a Famous surface and have it transition back to origin on mouseup? but I dont know how can I use "setPosition" function in my case?

Have you taken a look at [this question](http://stackoverflow.com/questions/23129805/drag-a-famous-surface-and-have-it-transition-back-to-origin-on-mouseup)? Besides the mouse-up, it seems to be exactly what you're after. — knocked loose, Jul 28 '15 at 12:10

score 2 · Accepted Answer · answered Jul 28 '15 at 13:10

2

You can setPosition

$famous.find('fa-draggable')[0].modifier.setPosition([4,4])

Demo Plunker: http://plnkr.co/edit/ZwLFXsjoxHyXqPpUgxJh?p=preview

answered Jul 28 '15 at 13:10

Vidyadhar

1,088
9
15

pasine · Answer 2 · 2015-07-28T12:05:01.197

Last time I have used Famous/Angular, I had a similar problem and end up not using the draggable surface.
If you have a look to the documentation, is not really useful.
BTW you could try this:

<fa-modifier fa-size="[90, 90]" fa-translate="item.position.get()">
             <fa-draggable fa-pipe-from="item.handler"
                           fa-options="draggableOptions"
                           fa-pipe-to="item.handler">
                           <fa-surface fa-background-color="'#268bd2'"
                                       fa-pipe-to="item.handler">
                                        A
                           </fa-surface>
             </fa-draggable>
</fa-modifier>

and in your controller

var _initialState = [0, 0, 0]; //This should be your initial state

$scope.item.position = new Transitionable(_initialState); // This define item.position as a Transitionable object
$scope.item.handler.on('end', function (e) {
   $scope.item.position.set(_initialState);
});

I never tried this and I have no time to do it now, but I hope the suggestion can help you.

UPDATE

Here is an example of a view using the draggable directive.
It looks it's doing something similar to what I proposed.

How to return dragged fa-surface back to its origin using famo/angular?

2 Answers2