<!DOCTYPE html> <html ng-app="Directives"> <head> <title>Angular example with connected lists</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">Angular single</a> <a href="angular-connected.html" class="button button-narrow py2 m0 button-transparent is-active">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 connected lists </h1> <div class="col col-12"> <div class="mt2 p2 bg-yellow border navy border-navy"> <code class="mb0"> <div class="muted">// Connect two lists by passing the connectWith option to the html-sortable directive:</div> <div><ul html-sortable="{ connectWith: '.connected' }" class="connected" ng-model='data1'>...</ul></div> <div><ul html-sortable="{ connectWith: '.connected' }" class="connected" ng-model='data2'>...</ul></div> </code> </div> </div> </div> <div class="sm-flex flex-center mxn2"> <div class="col col-6"> <ul class="m2 flex flex-column list-reset connected" html-sortable="sortableOptions" ng-model='data1'> <li class="p1 mb1 yellow border border-navy bg-navy" ng-repeat="itm in data1">{{itm}}</li> </ul> </div> <div class="col col-6"> <ul class="m2 flex flex-column list-reset connected" html-sortable="sortableOptions" ng-model='data2'> <li ng-repeat="itm in data2" class="p1 mb1 navy border border-navy bg-yellow"> {{itm}} </li> </ul> </div> </div> <div class="sm-flex flex-center mxn2"> <div class="col col-12 m2"> <h3 class="h3">Model 1:</h3> <pre>{{ data1 }}</pre> <h3 class="h3">Model 2:</h3> <pre>{{ data2 }}</pre> </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-connected.js"></script> </body> </html>