Skip to content

Instantly share code, notes, and snippets.

@codermrrob

codermrrob/app.html

Forked from JeroenVinke/app.html
Last active July 29, 2016 06:31
Show Gist options
  • Save codermrrob/5f71ad2f3aaf3fc4a432dc7868ea5725 to your computer and use it in GitHub Desktop.
Save codermrrob/5f71ad2f3aaf3fc4a432dc7868ea5725 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia - Sortable
Raw
app.html
<template>
<div class="list-wrapper">
<h3>Available</h3>
<ul id="sortable-listA" ref="availablelist" style="min-height: 250px; border : 2px solid;"; ak-sortable="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>
Raw
app.js
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");
}
});
}
*/
/*bind() {
$(this.availablelist).kendoSortable({
hint: function (element) {
return $("<span>drag text</span>")
.css("color", "#fa6e00");
}
});
}
*/
}
Raw
index.html
<!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>
Raw
main.js
/*******************************************************************************
* 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());
}
@codermrrob
Copy link
Author

codermrrob commented Jul 29, 2016 •
edited
Loading

I treat the two sortable lists as "available items" and "selected items"

There appears to be two issues with the sortable component with respect to hint customisations.

  1. The main one, drop functionality fails after specifying hint configuration in the attached() or bind() methods. I believe attached() would be the correct lifecycle method but I tried bin() as well, just in case. Also notice the placeholder disappears from both lists.

Comment and uncomment the attached()/bind() methods in app.js to see this work/fail.

  1. A smaller issue but a little confusing for end users; when dragging an item from the selected list back into the available list the end slot in the list is not available to drop in until you have dragged over other items in the list.

Just drag and drop an item from available into selected and then drag and drop it back to available to see this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment