Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

I had rewritten the directive, it would be better than old version #7

Closed
wants to merge 4 commits into from
Closed

I had rewritten the directive, it would be better than old version #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4a32058
rewrite uiSortable, it is better than old version
zensh May 30, 2013
51af804
fix a bug, add demo
zensh Jun 1, 2013
602fd46
change directive namespace to 'ui.directives.sortable'; update README.md
zensh Jun 1, 2013
755ecf7
use bootstrapcdn in demo
zensh Jun 3, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 22 additions & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,34 @@ This directive allows you to sort array with drag & drop.

Load the script file: sortable.js in your application:

```html
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
```

Add the sortable module as a dependency to your application module:

```js
var myAppModule = angular.module('MyApp', ['ui.directives.sortable'])
```
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>

Apply the directive to your form elements:

```html
<ul ui-sortable ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>
```

### Options

All the jQueryUI Sortable options can be passed through the directive.
<ul ui-sortable="mySortable">
<li ng-repeat="item in items">{{ item }}</li>
</ul>

Add the sortable module as a dependency to your application module:

```js
myAppModule.controller('MyController', function($scope) {
$scope.items = ["One", "Two", "Three"];
var myAppModule = angular.module('MyApp', ['ui.directives.sortable'])

$scope.sortableOptions = {
update: function(e, ui) { ... },
axis: 'x'
};
});
```

```html
<ul ui-sortable="sortableOptions" ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>
```
### Options

All the jQueryUI Sortable options, methods, events can be passed into `mySortable`.

myAppModule.controller('MyController', function($scope) {
$scope.items = ["One", "Two", "Three"];

$scope.mySortable = {
options: {
axis: 'x'
},
items: $scope.items,
events: {
update: function(e, ui) { ... }
}
}
});

101 changes: 81 additions & 20 deletions demo/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,82 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AngularUI - Date Picker Demo</title>
<base href=".."></base>
<link rel="stylesheet" href="components/jquery-ui/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="components/jquery/jquery.js"></script>
<script type="text/javascript" src="components/jquery-ui/ui/jquery-ui.custom.js"></script>
<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="src/date.js"></script>
</head>
<body ng-app="ui.date">
<label>Select Date: <input type="text" ui-date ng-model="aDate"></label>
<div>{{aDate}}</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularUI - uiSortable</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.sortable-placeholder {
border: 1px solid #fcefa1;
background: #fbf9ee;
color: #363636;
height: 28px;
}
</style>
</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">AngularUI - uiSortable</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>

<div class="container" ng-app="uiSortableDemo" ng-controller="uiSortableCtr">

<h1>Demo 1</h1>
<i>Demo passing IE8/IE9/IE10/firefox/chrome</i>
<table class="table table-hover">
<thead>
<tr>
<th>UID</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
<tbody ui-sortable="sortItems">
<tr ng-repeat="user in users">
<td>{{user.uid}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.email}}</td>
<td>{{user.desc}}</td>
</tr>
</tbody>
</table>
<div><h2>Users Array:</h2>{{users}}</div>

</div> <!-- /container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="../src/sortable.js"></script>
<script src="demo.js"></script>

</body>
</html>
47 changes: 47 additions & 0 deletions demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
'use strict';
/*global angular */
angular.module('uiSortableDemo', ['ui.directives.sortable']).
controller('uiSortableCtr', ['$scope',
function ($scope) {
$scope.users = [{
uid: 1,
name: 'name1',
age: 25,
email: '[email protected]',
desc: '111111111111111111'
}, {
uid: 2,
name: 'name2',
age: 26,
email: '[email protected]',
desc: '222222222222222'
}, {
uid: 3,
name: 'name3',
age: 27,
email: '[email protected]',
desc: '3333333333333333333'
}, {
uid: 4,
name: 'name4',
age: 28,
email: '[email protected]',
desc: '4444444444444444444'
}
];
$scope.sortItems = {
options: {
axis: 'y',
cursor: 'move',
placeholder: 'sortable-placeholder'
},
items: $scope.users
};
$scope.$on('sortcreate', function (event, ui) {
console.log('sortItems:', $scope.sortItems);
});
$scope.$on('sortupdate', function (event, ui) {
console.log('ui:', ui);
});
}
]);
Loading