Giter Site home page Giter Site logo

angular-legacy-sortablejs's Introduction

angular-legacy-sortable

Angular 1 module that integrates with Sortable.js

Installation

Install with NPM

npm install angular-legacy-sortablejs-maintained

Don't install the old angular-legacy-sortablejs package as thats not maintained

Examples

Simple Drag and Drop

angular.module('exampleApp', ['ng-sortable'])
	.component('dragAndDropExample', {
		template: `<ul ng-sortable>
				<li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
					{$ item $}
				</li>
			</ul>`,
	})

Specifying a Config

You can pass a Config obj to ng-sortable and it will pass this onto the created sortable object. The available options can be found here

angular.module('exampleApp', ['ng-sortable'])
	.component('dragAndDropExample', {
		template: `<ul ng-sortable=$ctrl.sortableConf>
				<li ng-repeat="item in ['burgers', 'chips', 'hotdog']">
					{$ item $}
				</li>
			</ul>`,
		controller: function ComponentController() {
			var ctrl = this;
			ctrl.sortableConf = {
				animation: 350,
				chosenClass: 'sortable-chosen',
				forceFallback: true,
			};
		},
	});

Drag handle

Example showing how use the handle option

angular.module('exampleApp', ['ng-sortable'])
	.component('dragAndDropExample', {
		template: `<ul ng-sortable=$ctrl.sortableConf>
				<li ng-repeat="item in ['burgers', 'chips', 'hotdog']" draggable="false">
					<span class="grab-handle">Drag Header</span>
					<div>{$ item $}</div>
				</li>
			</ul>`,
		controller: function ComponentController() {
  		var ctrl = this;
			ctrl.sortableConf = {
				animation: 350,
				chosenClass: 'sortable-chosen',
				handle: '.grab-handle',
				forceFallback: true,
			};
		},
	});

angular-legacy-sortablejs's People

Contributors

doxiaodong avatar rubaxa avatar samjacobclift avatar tplaner avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.