How to revert by dragging a fa-surface back to its original state using famo / angular?

I am using the 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 have 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 ensure that after a drag event, the dragged surface returns to its default position?

I found this question Drag a known surface and bring it back to its original position on mouseup? but i dont know how to use setPosition function in my case?

+3


source to share


2 answers


You can setPosition

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

      



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

+2


source


The last time I used Famous / Angular I had a similar problem and I was not using a draggable surface.
If you look at the documentation it is not very helpful.
By the way, you can 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 have never tried this and I donโ€™t have time to do it now, but I hope this helps you.

UPDATE

Here's an example of a view using a drag and drop directive.
It looks like it does something similar to what I suggested.

0


source







All Articles