Compact extension for AngularJS to add wider support of swipes and drags
Small extension for AngularJS to add wider support of swipes and drags
Live Demo here.
Add bower dependency.
bower install --save angular-swipe-element
Include script in you html file.
<script type="text/javascript" src="bower_components/angular-swipe-element/angular-swipe-element.min.js"></script>
Define module as AngularJs dependency!
var app = angular.module('app', ['angular-swipe-element']);
Define the callbacks in controller!
app.controller(function($scope) {
$scope.onSwipeStart = function(dir, deltaX, deltaY) { console.log('Started, direction: ' + dir + '. DeltaX: ' + deltaX + '; DeltaY: ' + deltaY); };
$scope.onSwipeMove = function(dir, deltaX, deltaY) { console.log('Moved, direction: ' + dir + '. DeltaX: ' + deltaX + '; DeltaY: ' + deltaY); };
$scope.onSwipeEnd = function(dir, deltaX, deltaY) { console.log('Released, direction: ' + dir + '. DeltaX: ' + deltaX + '; DeltaY: ' + deltaY); };
});
Define the directive!
<div swipe-element="onSwipeEnd(dir, deltaX, deltaY)"
swipe-element-move="onSwipeMove(dir, deltaX, deltaY)"
swipe-element-start="onSwipeStart(dir, deltaX, deltaY)"></div>
You are ready! Enjoy the plugin.
Directive can be used to catch swipe(mouse drag) start/move/end events. You can pass callbacks for these events in the following attributes:
Attribute | Required | Description |
---|---|---|
swipe-element | Required | Fires when user stops swiping/dragging current element |
swipe-element-start | optional | Fires when user touches/mousedowns current element |
swipe-element-move | optional | Fires when user moves finger/mouse while holding current element |
When some event is fired, directive callback's scopes are provided with $event parameter as well as with the following properties which could be used for your needs:
Property | Description |
---|---|
$event | Contains all of the data properties |
x | Current X coordinate of the pointer in the document |
y | Current X coordinate of the pointer in the document |
deltaX | Difference on the X axis, comparing to swipe/drag starting point. (currentPosition - startingPosition) |
deltaX | Difference on the Y axis, comparing to swipe/drag starting point. (currentPosition - startingPosition) |
dir | String value representing direction, in which swipe/drag is heading. Can be equal to '', 'u', 'd', 'l', 'r'. If deltaX and deltaY equal to each other and not equal 0 takes horizontal value. |
hDir | String value representing direction, in which swipe/drag is heading on X axis. Can be equal to '', 'l', 'r'. |
vDir | String value representing direction, in which swipe/drag is heading on Y axis. Can be equal to '', 'u', 'd'. |
startX | X coordinate of the pointer in the document, when swipe/drag started |
startY | Y coordinate of the pointer in the document, when swipe/drag started |
initialElementBounds | getClientBoundingRect() executed on element when the swipe/drag started. |
triggerType | Could be used to differ mouse and touch events. String value. Can be 'mouse' or 'touch'. |
source | Source DOM event. |
MIT license.
You are welcome to contribute. Feel free to contact me.