61 lines
2.7 KiB
HTML
61 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html ng-app="Directives">
|
||
|
|
<head>
|
||
|
|
<title>Angular example with a single list</title>
|
||
|
|
<link rel="stylesheet" href="../bower_components/basscss/css/basscss.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="clearfix mb2 white bg-navy">
|
||
|
|
<div class="left">
|
||
|
|
<a href="index.html" class="button py2 m0 button-transparent">HTML5 Sortable</a>
|
||
|
|
<a href="angular-single.html" class="button button-narrow py2 m0 button-transparent is-active">Angular single</a>
|
||
|
|
<a href="angular-connected.html" class="button button-narrow py2 m0 button-transparent">Angular connected</a>
|
||
|
|
<a href="angular-ngRepeat-connected.html" class="button button-narrow py2 m0 button-transparent">Angular ngRepeat</a>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<a href="#!" class="button py2 m0 button-transparent">Fork on GitHub</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="px2 sm-px3 py2 mb3 col-8 mx-auto" ng-controller="MainCtrl">
|
||
|
|
<section class="mb3 mx-auto col col-12">
|
||
|
|
<div class="p3 navy bg-yellow">
|
||
|
|
<div class="flex flex-column">
|
||
|
|
<h1 class="h1 m0 flex-auto">
|
||
|
|
Angular example with single list
|
||
|
|
</h1>
|
||
|
|
<div class="col col-12">
|
||
|
|
<div class="mt2 p2 bg-yellow border navy border-navy">
|
||
|
|
<code class="mb0">
|
||
|
|
<div class="muted">// Use the html-sortable on the container that has the sortable elements: directive:</div>
|
||
|
|
<div><ul html-sortable="{ ... }" ng-model='data1'>...</ul></div>
|
||
|
|
</code>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sm-flex flex-top mxn2">
|
||
|
|
<div class="col col-6">
|
||
|
|
<ul class="m2 flex flex-column list-reset" html-sortable="" html-sortable-callback="sortableCallback(sourceModel, destModel, start, end)" ng-model='data1'>
|
||
|
|
<li ng-repeat="itm in data1" class="p1 mb1 yellow border border-navy bg-navy" >
|
||
|
|
{{itm}}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<input type="submit" value="Add another item" class="button ml2 bg-navy" ng-click="add()" />
|
||
|
|
</div>
|
||
|
|
<div class="col col-6 ml2 mr2">
|
||
|
|
<h3 class="h3">Model 1:</h3>
|
||
|
|
<p>{{ data1 }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
|
||
|
|
<script src="../bower_components/angular/angular.min.js"></script>
|
||
|
|
<script src="../dist/html.sortable.js"></script>
|
||
|
|
<script src="../dist/html.sortable.angular.js"></script>
|
||
|
|
<script src="../src/html.sortable.src.js"></script>
|
||
|
|
<script src="../src/html.sortable.angular.js"></script>
|
||
|
|
<script src="angular-single.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|