Skip to content

Instantly share code, notes, and snippets.

@QuantumKing
Last active August 29, 2015 14:25
Show Gist options
  • Save QuantumKing/0522b1f24fe849e4204e to your computer and use it in GitHub Desktop.
Save QuantumKing/0522b1f24fe849e4204e to your computer and use it in GitHub Desktop.
example
import Ember from 'ember';
export default Ember.Component.extend({
initSortable: function() {
var refreshed = false;
var _this = this;
this.$().sortable({
axis: 'y',
update: function(event, ui) {
Ember.run.scheduleOnce('afterRender', this, function(){
var id = ui.item.data('id');
var idx = Ember.$(this).children().index(ui.item);
Ember.$(this).sortable('cancel');
_this.updateItemOrder(id, idx);
});
},
start: function() { // event, ui
if (!refreshed) {
_this.$().sortable('refreshPositions');
refreshed = true;
}
}
});
}.on('didInsertElement'),
destroySortable: function() {
this.$().sortable('destroy');
}.on('willDestroyElement'),
updateItemOrder: function(key, idx) {
var items = this.get('items');
var item = items.findBy('id', key);
this.beginPropertyChanges();
items.removeObject(item);
items.insertAt(idx, item);
this.endPropertyChanges();
alert(JSON.stringify(items.mapBy('word')));
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
model: function() {
return Ember.Object.create({
items: [
{id:1, word:'hello'},
{id:2, word:'world'}
]
});
}.property()
});
{{#sortable-list items=model.items as |item index|}}
<div data-id={{item.id}}>{{index}}&nbsp;{{item.word}}</div>
{{/sortable-list}}
{{#each items as |item index|}}
{{yield item index}}
{{/each}}
{
"version": "0.4.0",
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js",
"jquery-ui": "https://code.jquery.com/ui/1.11.4/jquery-ui.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment