-
-
Save JeroenVinke/353b0269649cc7273dcbda011a41be8f to your computer and use it in GitHub Desktop.
Aurelia - Sortable
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div class="list-wrapper"> | |
| <h3>Available</h3> | |
| <ul id="sortable-listA" | |
| ref="availablelist" | |
| style="min-height: 250px; border : 2px solid;"; | |
| ak-sortable="k-hint.call: availableHint($event); k-connect-with: #sortable-listB; k-placeholder.call: placeholder($event)"> | |
| <li class="linked-list-item">item one</li> | |
| <li class="linked-list-item">item two</li> | |
| <li class="linked-list-item">item three</li> | |
| <li class="linked-list-item">item four</li> | |
| </ul> | |
| <h3>Selected</h3> | |
| <ul id="sortable-listB" ref="selectedlist" style="min-height: 250px; border : 2px solid;"; ak-sortable="k-connect-with: #sortable-listA; k-placeholder.call: placeholder($event)"> | |
| </ul> | |
| </div> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| placeholder(e) { | |
| return $("<li class='linked-list-item' id='placeholder'>Drop Here!</li>"); | |
| } | |
| /* remove comments around attached/bind methods to see the drop fail and disappearance of the placeholder. | |
| I believe attached() is the correct method to run jQuery config but I supplied a bind() method as well just to try it. | |
| Also note that the drop and placeholder do not reliably work for the last place in the lists | |
| (with or without hint customisation). You can see this if you drag an item from list two back into list one - | |
| you must move to a slot within the list before you can drop at the end of the list.*/ | |
| // attached() { | |
| // $(this.availablelist).kendoSortable({ | |
| // hint: function (element) { | |
| // return $("<span>drag text</span>") | |
| // .css("color", "#fa6e00"); | |
| // } | |
| // }); | |
| // } | |
| availableHint (element) { | |
| return $("<span>drag text</span>") | |
| .css("color", "#fa6e00"); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css"> | |
| <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.19/config2.js"></script> | |
| <!--<script src="./config2.js"></script>--> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-kendoui-bridge', kendo => kendo.pro()); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment