How to make a draggable Fab?


#1

Guys, I need to make a draggable Fab button which will be place where ever the user wishes to position it. I have try an animation tutorial (https://www.joshmorony.com/building-an-absolute-drag-directive-in-ionic-2/) but no effect is been perform. Pls guys, any help will be appreciated.


#2

Did you try the full example on the tutorial?

I have used Draggabilly https://draggabilly.desandro.com/ in the past, but Josh’s version seems easier to me (and more angular)


#3

Yea, I try the full tutorial i dont why the function, but did you used it and it worked? bcos i would also prefer the josh cos i want it for the entire project and its also more angular.


#4

nope, didn’t try it. And would love to do so, but a bit short on time


#5

Working fine with me

Only the FAB needs some rework due to its position relative to the click

ps. the tutorial has a small flaw as ionic generate uses a different directory to store the directive. But that was an easy fix


#6

kk thanks man, i would check that out too


#7

Can u elaborate on that?


#8

If you click the FAB (with PC) then you’ll note that the FAB is slightly offset from the location where you click. Looks a bit unnatural. Don’t know how it looks on touch device.

That is why I said that a bit of rework might be needed.