如何使用famo / angular将拖动的fa-surface返回其原点?

时间:2015-07-19 13:59:37

标签: angularjs famo.us famous-angular

我正在使用fa-draggable指令:

<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>

在我的控制器里面,我设置了:

$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
            });

如何确保拖动事件完成后,可拖动曲面返回默认位置?

我发现了这个问题Drag a Famous surface and have it transition back to origin on mouseup? 但我不知道如何使用&#34; setPosition&#34;功能在我的情况下?

2 个答案:

答案 0 :(得分:2)

你可以setPosition

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

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

答案 1 :(得分:0)

上次我使用了Famous / Angular,我遇到了类似的问题,最终没有使用可拖动的表面。
如果你看一下the documentation,那就没用了 顺便说一句,你可以试试这个:

<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>

并在您的控制器中

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);
});

我从来没有尝试过,我现在没时间做,但我希望这个建议可以帮助你。

<强>更新

这是使用draggable指令的视图的an example 它看起来正在做类似于我提议的事情。