我使用的是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
});
如何确保在拖动事件完成后,可拖动表面返回到默认位置?
我发现这个问题拖动一个著名的表面,并有它的过渡回到原点上的鼠标?但我不知道如何在我的情况下使用"setPosition"函数?
可以设置position
$famous.find('fa-draggable')[0].modifier.setPosition([4,4])
演示活塞:http://plnkr.co/edit/ZwLFXsjoxHyXqPpUgxJh?p=preview
上次我使用Famous/Angular时,我遇到了类似的问题,最终没有使用可拖动的表面。
如果你看一下文档,并不是很有用。
顺便说一句,你可以试试这个:
<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指令的视图示例。
它看起来正在做一些类似于我提议的事情。