Angular Greensock Draggable
Use Greensock Draggable library directly in Angular ( > 1.5 )
- Import the Greensock Draggable Library
- Import the TweenLite Library if you set the Draggable Configuration 'throw' to true (optional)
- Import the module 'ngGreensockDraggable'
var app = angular;
- (Optional) If you are using ESLint, you have to specify the plugins in .eslintrc file
"extends": "eslint:recommended""plugins": "angular" "Draggable" "TweenLite""env":"browser": true"jasmine": true"globals":"angular": true"module": true"inject": true
Installation using NPM
npm install angular-greensock-draggable
yarn add angular-greensock-draggable
The component allows you to drag some objects vertically, horizontally or both.
ThrowProps can be used by setting 'throw-props' to true. Otherwise, this component contains a throw effect (in beta version). To use it, set 'throw' to true.
The component provides some callbacks:
- postLink (called after this controller's element and its children have been linked (transclude included). For more information, see https://docs.angularjs.org/guide/component)
- onDrag (this callback returns also the delta dX, dY between the dragStart and the drag coordinates)
All these callbacks returns the gesture event (MouseEvent, TouchEvent)
The drag can be enabled / disabled on the fly by updating the value of the 'enable' property.
For more informations about the Draggable configuration, navigate to the Greensock Draggable Docs
Your draggable element