jellekralt / Angular Drag Scroll
Licence: mit
Lightweight drag to scroll directive for AngularJS
Stars: ✭ 35
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Angular Drag Scroll
ng-scrollable
Superamazing scrollbars for AngularJS
Stars: ✭ 58 (+65.71%)
Mutual labels: angularjs, scrolling
Verticalviewpager
Vertical View Pager Scroll page in upward and downward direction. To know more See README.
Stars: ✭ 33 (-5.71%)
Mutual labels: scrolling
Fullpage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Stars: ✭ 32,974 (+94111.43%)
Mutual labels: scrolling
Ionic3 Angular43 Httpclient
Example of Ionic 3 and the new Angular 4.3 HTTPClient
Stars: ✭ 20 (-42.86%)
Mutual labels: angularjs
Generator Angular Auto Admin Loopback
Generator for automatic CRUD angular backend for loopback apps and apis
Stars: ✭ 32 (-8.57%)
Mutual labels: angularjs
Web Framework For Java
A seed project with spring boot for AngularJS, AngularJs Material, Thymeleaf, RESTful API, MySQL and admin panel based on AdminLTE.
Stars: ✭ 29 (-17.14%)
Mutual labels: angularjs
React Picky Date Time
A react component for date time picker. Online demo examples
Stars: ✭ 31 (-11.43%)
Mutual labels: scrolling
Angular Canvas Area Draw
Simple library to draw polygons over image with canvas
Stars: ✭ 21 (-40%)
Mutual labels: angularjs
Advanced Directives With Angular Js
Advanced Directives with Angular JS - Code for the Screencast
Stars: ✭ 33 (-5.71%)
Mutual labels: angularjs
Scroll bars
Hide or show app bar and bottom navigation bar while scrolling.
Stars: ✭ 28 (-20%)
Mutual labels: scrolling
Cardviewlist
An elegant and responsive CardView like Android on iOS with Swift. Available horizontal and vertical scrolling with full animations and customizable.
Stars: ✭ 30 (-14.29%)
Mutual labels: scrolling
Todolist
📄 Task management web application built with AngularJS and Java EE.
Stars: ✭ 33 (-5.71%)
Mutual labels: angularjs
Angular Drag to Scroll
Lightweight drag to scroll directive for AngularJS
Try it yourself at: http://jellekralt.github.io/angular-drag-scroll/
Installation
- npm:
npm install angular-drag-scroll --save
- Bower:
bower install angular-drag-scroll --save
- Download: you can just download the files from Github
Run
- Run demo:
npm start
Test
- Unit tests:
npm test
- E2E tests:
npm test-e2e
Usage
- Include
ng-drag-scroll.js
in your HTML template:
<script src="angular.js"></script>
<script src="ng-drag-scroll.js"></script>
- Add a dependency to the ng-drag-scroll module in your application.
angular.module('MyApp', ['ng-drag-scroll']);
- Add an attribute to an element with a scrollbar to make the content scrollable. You can use the drag-scroll attribute value to switch the scrolling on/off. The value can be a variable or an expression.
<div drag-scroll="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</div>
Configure
The following attributes can be used to configure the directive:
Axis
Use the axis attribute to lock the dragging to a specific axis. By default, both axes are enabled
<!-- Locks the dragging to the X axis -->
<div drag-scroll axis="x">
<!-- Locks the dragging to the Y axis -->
<div drag-scroll axis="y">
Events
Use the onDragStart and onDragEnd events to call functions whenever the dragging starts or stops
<!-- Calls a function on start and stop -->
<div drag-scroll onDragStart="handleDragStart()" onDragEnd="handleDragEnd()">
Credits / Inspiration
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].